Back to Top
The nuts and bolts for
Creative web development

Sliding Billboard

“Organize your work greatly in a virtual book!”

Discover the power of interactive presentations – the Sliding Billboard ! Organize your work greatly in a virtual book, which auto scrolls and enables your users to slide from page to page or chapter to chapter naturally. You can present any type of work this way: your portfolio, photo albums, products index, web shop, ads and much more. Choose from the 13 cool CSS designs included, so your billboard always looks great and suites your site perfectly.

Overview

Features Highlights:

  • 13 stylish CSS designs included - Various styles to fit your web site perfectly - see them all
  • Pure CSS Sliding Billboard - Doesn't require any plugins and works on all modern browsers
  • Customizable animation - Adjust the Billboard appearance by speed, easing, scroll interval and more
  • Search Engine Friendly - as the Sliding billboard is pure HTML and CSS code it can be nicely indexed by all search engines and web spiders
  • Auto Paginating - Quick access to all the pages in the Sliding Billboard
  • Organize in Sections - Divide your content for a better preview
  • Add titles and description to each image - An easy way to write description for your images or products
  • DMXzone Resizer included - Integrated Resizer, so that you don't need to use any additional programs to fit the images to the Billboard

* For complete Features overview press the Features in Detail button

Features

  • 13 stylish CSS Designs Included - Various styles to fit your web site perfectly
    • Lightweight CSS3 Designs - We have chosen to use CSS3 effects like rounded corners and shadows in our CSS designs to make them really pure CSS and very light - so no extra images for many weird css hacks are loaded

  • Pure CSS Sliding Billboard - Doesn't require any plugins and works on all modern browsers

  • Customizable animation - Adjust the Billboard appearance by speed, easing, scroll interval and more
    • Animation easing and speed - regular sliding is not enough for you? How about bouncing or elastic sliding?

  • Search Engine Friendly - as the Sliding billboard is pure HTML and CSS code it can be nicely indexed by all search engines and web spiders


  • Auto Paginating - Quick access to all the pages in the Sliding Billboard

  • Organize in Sections - Divide your content for a better preview
    • Multiple Sections - Divide your content in multiple sections and have a great tabs/menu like navigation between the sections

  • Add titles and description to each image - An easy way to write description for your images or products
    • Great title and description hover effects - When displaying images only the title will be shown on top of the image and the description will slide in only when you move with your mouse on top of the image

  • Multiple Rows and Columns - Enter the desired number of rows and columns and the gallery items will automatically be arranged

  • Auto generated thumbnails – Auto generate your thumbnails with the correct size while proportions are maintained

  • DMXzone Resizer included - Integrated Resizer, so that you don't need to use any additional programs to fit the images to the Billboard

  • Fully customizable - Don't like to supply styles? Well it is all CSS based so you can easily make your own adjustments in the CSS from within Dreamweaver's CSS editor

  • Fully Controllable by behaviors - You want to navigate to specific position, start or stop the billboard - it can be easily done with the Control Sliding Billboard behavior.

 
  • Don't want auto sliding – Well,  just set do Not set the Auto Play - and then the user will navigate manually only

  • Auto anchor navigation - You want to have your own link somewhere else on your page and when the user click on it, the billboard should go to a specific section? Easy just use as link #section_name

  • Horizontal or Vertical scroll - The choice is yours

  • Full support for keyboard and mouse wheel navigation (optional)

  • Customizable Navigation Position - You can choose where you want your section and page navigation top or bottom

  • Side Navigation buttons - You can also choose if you want to have side navigation arrow buttons, where should they be positioned inside, outside, middle and when; always or only on mouse over (hover)

  • Integrated in Dreamweaver – Interactive dialog in Dreamweaver with all the options you’ll need
    • An inline property inspector, so that you can easily change visual options later on
 
  • Preview in Dreamweaver - You can preview within Dreamweaver how your billboard will look like

Showcases


  • Online Photo Services Showcase

    For this showcase we added 3 different Sliding Billboards on each device for the images preview and also used DMXzone Bootstrap to create the page layout.

  • IT Company Website Showcase

    For this showcase we used the HTML5 Slideshow that's connected with the HTML5 Parallax Slider through the behavior connector and both together bring an amazing user experience when browsing the ...

  • Watches Shop with Different Options Showcase

    In this showcase we used Universal CSS Navigation Menu for the website navigation, DMXzone Tabs for the additional information and the Sliding PayPal Shopping Cart for the purchase process. The ...

  • Vertical Sliding Billboard Showcase

    For this amazing showcase we used Dreamweaver CS6 fluid grid layout where we added two Sliding Billboards next to each other, that are controlled by two navigation buttons. The buttons are connected ...

  • Product Features Showcase

    To show the features packed in the product we created great looking sliding pages with the Sliding Billboard which is styled through the CSS.

  • HTML5 3D Flipping Gallery Store Showcase

    For this showcase page we used HTML5 3D Flipping Gallery in order to create a flipping image for the selected product. The trigger is on click and the flip direction is set to right. On the back we ...

  • Shoes Store Showcase

    For this showcase we used our HTML5 3D Flipping Gallery in order to create an image gallery. The images are set to flip on click and the direction is set to bottom. The order is put-up to random. ...

  • Golf Equipment Store Showcase

    For this showcase we used DMXzone Supersized for the background images, Sliding Billboard to present the different sections of the store and Universal CSS Navigation menu for the site navigation.

  • Vacation Rentals Showcase

    For this showcase we used Sliding Billboard in order to display details about the available rentals as well as DMXzone Google Maps that shows the locations when clicked on the 'View on map' button.

  • Responsive Sliding Billboard

    If you wish to display the showcase on your mobile device, simply scan the QRcode or use this shorten URL -http://goo.gl/pDs3n

  • MP3 Store

    In this showcase you can see a simple music store created with the HTML5 MP3 Player and Sliding Billboard extensions. When you click on the image thumbnails, the Sliding Billboard playlist changes.

  • Enhanced Sliding Billboard

    Each image in the Sliding Billboard is enhanced with a sepia and blur image filter with the help of HTML5 Image Enhancer.

  • Tech Store Showcase

    For this showcase the navigation is created with the Universal CSS Navigation Menu, the mouse over effect on the images with Advanced CSS Animator, the menus within the images with Sliding Menu and ...

  • Metallica - Francais Pour Une Nuit

    The showcase contains most of the videos that have been included in Metallica's last DVD - Francais Pour Une Nuit. The videos open in a Lightbox directly streamed from Youtube.

  • Vacation Album

    In this showcase we've combined Sliding Billboard with DMXzone Lightbox, so that the images open in a stylish popup window.

  • Extreme sports

    In this showcase you can see how we've edited the design of the Billboard and created a completely new one.

  • Formuila One World championship Circuits

    Go through the sections in the showcase in order to view all Formula One Circuits. Click on the circuit name and read more about it in a cool Lightbox window.

  • Art Walk Showcase

    The showcase combines Universal CSS Navigation menu which navigates the Sliding Billboard items and the images are displayed in a DMXzone Lightbox.

  • Pixar Movies

    The showcase features custom designed buttons which navigate the Billboard.

  • Advanced Tooltips & Sliding Billboard Showcase

    In this showcase you can experience how we combined Advanced Tooltips with Sliding Billboard in order to present products and info about them that pops up in a designer tooltip on mouse over.

  • Air Show Galleries Showcase

    All CSS Image Galleries are nicely packed in a Sliding Billboard and open in a cool Lightbox.

  • Building an Interior Design Page

    As you might already noticed we've been publishing some amazing showcases recently, using DMXzone extensions. Now it's time to pack all the needed files and share them with the world. All Templates ...

  • HTML5 Suite

    In this showcase we've used seven out of nine extensions packed in the HTML5 Suite to create a Website. We've also added tips, so you can explore each detail how it's been made and which extensions ...

  • Cocktails Recipes Showcase

    In this showcase we've connected Sliding Billboard and Animated Thumbnail Gallery in order to show the cocktail recipe when the thumbnail is clicked.

  • iPad Gestures

    Use your mouse to simulate iPad touchscreen gestures (click and drag) to control the Sliding Billboard.

  • Sticky Menu with Different Positioning Showcase

    The showcase we will show you how to navigate the Sliding Billboard, that opens in a stylish Lightbox window, from four different positions of the menu.

  • Christmas Cards

    The showcase combines Universal CSS Navigation menu which navigates the Sliding Billboard items and the images are displayed in a DMXzone Lightbox.

  • D'Layna Music

    D'LAYNA is an inspired and inspirational vocalist/writer/producer whose uplifting voice regularly lights up the skies over clubland from sunny San Francisco to urban New York and abroad. The showcase ...

  • Rolling Stones 2009 Remasters

    For this showcase we used Sliding Billboard in order to present all albums and song samples that can be played with Flash MP3 Player.

  • Jukebox Showcase

    In this showcase we will show you how to control the Flash MP3 Player with the Sliding Billboard.

  • Sliding Billboard Styles

    Check out the different styles we've added in the Sliding Billboard, so that it fits perfectly to your site design.

  • Banner and Ads

    This showcase will show you how you can present your Ads in a great Billboard.

  • Formula One Teams Showcase

    In this showcase you can see how easy it is to make a sliding billboard, in a great looking style, with well aligned items, auto pagination and great animation, all done in a few mouse clicks in ...

Videos

Basic Usage

Adding Mouse Gestures and New Easing Effects to a Sliding Billboard

With this movie we will show you how to simulate iPad/iPhone touchscreen gestures, as well as adding new easing effects.

Designing a Sliding Billboard

With this movie we will show you how to create a simple Billboard using DMXzone's Sliding Billboard.


Bundle Usage

Sliding Billboard with Added MP3 Player

With this movie we will show you how easily you can add Flash MP3 Player to your Sliding Billboard.

Creating Fantastic Billboard slides and Open them in a Lightbox

With this movie we will show you how to combine Sliding Billboard and DMXzone Lightbox in order to create amazing slides which open links in cool popup windows.

Controlling the Animated Thumbnail Gallery through Sliding Billboard

Controlling the Animated Thumbnail Gallery through Sliding Billboard

With this movie we will show you how to control Animated Thumbnail Gallery using Sliding Billboard.

Super Bundle Usage

Create a menu that is positioned on any side of your browser and navigate the Sliding Billboard.

With this movie we will show you how to navigate the Sliding Billboard sections through Universal CSS Navigation Menu. The Sliding Billboard content opens in a DMXzone Lightbox.

Requirements

Type: Suite
License: External link
Product: Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS X 10.4+
Browser: IE 6, Opera 8, Opera 9, Firefox 1.5, IE 7, Firefox 3.6+, Opera 9.5, Safari 3, Chrome 9+, IE 8, Safari 4+, Opera 10+, iPad
Used Technologies: jQuery, CSS, Web 2.0, JavaScript
Screen Shot: Details...
Tags: scrolling image, billboard, product scroller, css gallery, css product scroller, scrolling css gallery, css product billboard, css tabs, css scroller, css thumbnails scroller


History

Version 1.0.10

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.0.9

  • Improved Dreamweaver CS6 compatibility
  • Improved installer for Dreamweaver CS 6.1 (Adobe Creative Cloud) compatibility
  • Improved javascript file compression for smaller and faster file loading

Version 1.0.8

  • Improved integration with dynamic data
  • Improved DW integration
  • Included the latest mouse wheel plug-in
  • Latest jQuery 1.7.2 included
  • Improved installer for DW CS5.5+
  • Improved DMXzone Behavior Connector and other behaviors from DMXzone extensions
  • Improved installer for Mac DW CS6

Version 1.0.7

  • Latest DMXzone Image Resizer included for the best performance
  • Improved compatibility with newest jQuery 1.6+ versions
  • Improved mouse wheel handling for the newest jQuery
  • Included latest jQuery 1.6.3
  • Optimized source and files for smaller size
  • Improved automatic shared file copy, synchronization and upload from Dreamweaver
  • Improved working in Dreamweaver templates

Version 1.0.6

  • Included new jQuery 1.4.4
  • Improved depended file includes
  • Improved includes and cleanup of styles

Version 1.0.5

  • improved DMXzone Image resizer for Mac OSX and Windows 7
  • even faster resizing by using all the available cores of the CPU's
  • Improved working in Dreamweaver templates

Version 1.0.4

Full support for iPad and iPhone!

  • Now you can use gestures to fully navigate your Sliding Billboard with touch on the iPad or iPhone and with mouse sweeps on the regular computers. You can enable or disable this functionality with the new “Gestures” option on the Property Inspector.

Great animation speed improvements

  • Use Native CSS Transitions for the fastest animations on WebKit (Safari, Chrome) browsers.
  • Use CSS Transforms for hardware accelerated animations on iPad, iPhone and Safari on the Mac

Updated CSS Styles

  • Updated Styles for Opera support of CSS3 rounded corners and shadows.
  • Fixed some Webkit CSS styling
Dreamweaver CS5 Compatible

Version 1.0.3

  • Improved support for Google Crome and Safari
  • Improved inserting the JavaScript and CSS files in dynamic pages
  • Various speed improvements

Version 1.0.2

Browser optimizations:

  • Initial loading performance optimizations – the Sliding Billboard loads much faster now and it is displayed instantly. No more loading flickering in IE.
  • Improved compatibility with other frameworks like Prototype and Mootools.

Dreamweaver optimizations:

  • New method for uploading related files – now when related files are generated by the Sliding Billboard, the user is presented a dialog containing list of new files and with the choice to upload them all at once. No more files to forget to upload.
  • DMXzone Lightbox code is now only inserted if really used Sliding Billboard
  • Sliding Billboard works much better now in Dreamweaver templates.

Version 1.0.1

  • Fixed IE8 error with auto slide
  • Works great in DW8
  • Improved compatibility with DMXzone Behavior Connector so you can easily bind your Sliding Billboard with extensions like Flash MP3 Player, Advanced Tooltips and other

Update Procedure:

Just open a page using the Sliding Billboard. You will see a progress bar indicating new files are being copied. After that a dialog will popup with the list of the new files. Depending on if you have remote site defined and you have site synchronization enabled, the files will be automatically synchronized or you will be presented an option to upload all files.

You will need to reedit your existing billboards. Just select each one of them, in the Property Inspector click on the “Slides” button to bring the slides edit dialog. Just click on OK and the Sliding Billboard will be regenerated. Make sure you do that for all your Sliding Billboards. Save and upload your pages and you are done.

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article

Reviews

I Love Sliding Billboard

I love the easy to understand plug-in works, it is easy to set up and only took me a few minutes to figure out how to use it. The difference it makes to my classifieds website is phenomenal! Thanks DMX

What a great extension

I've bought Sliding Billboard a few days ago, and already have it up and running. It makes my site look very professional and sharp. I am having a fun time trying out different ways of working with it.

I had some questions, and used the forum. Patrick, you and Miroslav are good. I got very fast responses. Thank you.

My site still need lots of work, but I am getting there with the help of your great extensions and staff.

http://www.miniaturehorsesandshetlands.com/