Full Page Image slideshow
Description: They do say bigger is better, right? This is a supersized slideshow that automatically expands to fill up the container it's in to let you display a slideshow that either covers the entire visible screen, or a certain section inside the page. Each image is randomly panned, zoomed in or out to add flare, with an optional caption and persistent description also supported. Set the slideshow to stop after x cycles or run continuously, execute custom code after each image change, etc. This slideshow also has a giant list of supported browsers: IE9+, all modern versions of FF, Chrome and Safari, and mondern Android and iPhone devices.
Demo (see also "demo2.htm" and "demo3.htm":
Step 1: This script accesses the following external files which you need to upload to your server. Download them below (right click, and select "Save As"):
- jquery-slider.js (main .js file)
- smooth_slider.css (main .css file)
- playlist.json
- images.zip (zip file containing the sample images used. Unzip to where your slideshow page is).
Step 2: Insert the following code into the <head> section of your page:
Step 3: Add the below sample icon menu code to the BODY section of your page:
Well, that's it for installation. Read on for more details on setting up Full Page Slideshow.
Setting up Full Page Slideshow
The default HTML markup of a Full Page Slideshow looks like the following:
<div class="slideshowcontainer"
>
<div id="throbber"><img src="img/throbber.gif"></div>
<div id="resume" style="display:none">Replay</div>
<div id="pan_area"></div>
<div id="img_msg_area" class=""><span></span></div>
<div id="static_text_area">There is nothing more amazing than nature, the
miracle that is every creature in her domain. The birds, the lions, down to
every insect, together they form the circle of life that supports each
other.</div>
</div>
The parent DIV in red creates a slideshow that spans the dimensions of this DIV, versus a true full page slideshow that spans the entire screen (more on how to do the later in a moment). Five components of the slideshow are the "throbber" loading gif DIV, a "resume" button DIV, the main image "pan_area", the caption "img_msg_area" DIV, and finally, a non changing description "static_text_area" DIV. The IDs of these components can all be changed, with all but the "throbber" and "pan_area" DIVs themselves even being optional.
As mentioned, the default markup above creates a slideshow that only expands to the size of the parent container (in red above). This is probably the most common set up, whereby you wish to display a large slideshow on a page with other content. The size of this container can easily be set using CSS:
<style>
.slideshowwrapper{ /* dimensions of outermost slideshow container */
width: 80%;
height: 600px;
position: relative;
overflow: hidden;
}
</style>
Take a look at demo1.htm for an example of this.
Creating a slideshow that spans the entire screen
If you wish your slideshow to span the entire screen- meaning the slideshow is the only content on your page- the differences in markup from the default set up above are as follows. Firstly, for the HTML, it should NOT contain a parent container other than the BODY element itself:
<body>
<div id="throbber"><img src="img/throbber.gif"></div>
<div id="resume" style="display:none">Replay</div>
<div id="pan_area" style="height:100%"></div>
<div id="img_msg_area"><span></span></div>
<div id="static_text_area">There is nothing more amazing than nature, the
miracle that is every creature in her domain. The birds, the lions, down to
every insect, together they form the circle of life that supports each
other.</div>
</body>
Notice the absence of the outermost slideshowwrapper
DIV. For such
a setup, you also need to include the following CSS in the HEAD section to
properly set the document's dimensions and remove any padding/margins:
<style>
html,body { /* For full page slideshow that spans entire page (with no other
content), the below CSS is needed */
height:100%;
padding:0px;
margin:0px;
}
</style>
And that's it. See demo2.htm or demo3.htm for examples of true full page slideshows.
Having understood how the markup for Full Page Slideshow works, lets move on to the initialization code, which should be called in the HEAD section of your page to jump start the slideshow.
Calling smoothslider() initialization code
Call smoothslider()
on the image component of your slideshow markup
to initialize it:
$("#pan_area").smoothslider("install",
{
//options here...
})
Notice the element smoothslider()
should be called on- the
#pan_area
element- which corresponds to the image container in the
slideshow markup we saw earlier. The function should be passed two parameters,
the string "install
", followed by a list options, for example:
$("#pan_area").smoothslider("install",
{
"playlist_url":"playlist.json", // get the playlist and some config from
the server
"loops": 2, // number of loops before stopping. Remove thisoption to run
continuously
"throbber":$("#throbber") // an image to show when waiting for images to
load
})
Each option should be separated by a comma, except the very last option defined. The following lists all the available options in detail:
options | Description |
preload_images: int Defaults to -1 |
Sets whether slideshow should start after all images have been preloaded. Defaults to -1, which means "yes". Any other integer causes slideshow to start immediately, with images loading concurrently. |
playlist: [] Defaults to null |
An array holding the list of images you wish
to show, plus optional caption and desired transition effect for each
image. The syntax is: "playlist":[ The " "playlist":[ demo3.htm makes use of the |
playlist_url: "path_to_json_file" Defaults to null |
This option serves as an alternative way from
the above for defining your images (and some other options), inside an
external .json file on your server and fetched by the slideshow using
Ajax. Point "playlist_url" to where that .json file is
located on your server:"playlist_url": "playlist.json" "playlist.json" should contain a
JSON
object with the { The JSON object can also carry some other options normally defined
inline on the page, specifically: " |
loops: int Defaults to null |
The number of loops the slideshow should cycle through before stopping, such as 2 for 2 iterations. Defaults to null, meaning the slideshow will loop continuously. |
throbber: element Defaults to null |
A jQuery reference to the element on the page
containing an animated gif to show while the slideshow is loading. For
example, you might define the following markup on your page as the "throbber"
element: <div id="throbber"><img src="img/throbber.gif"></div> The throbber option would then be set to the following to reference it: "throbber":$("#throbber") |
anim_fps Defaults to 20 |
Sets the frames per second of the transition animation. |
transition_time Defaults to 2 |
Sets the duration of the transition, in seconds. |
hold_time Defaults to 4 |
Sets the duration of the pause between image changes, in seconds. |
on_image_change: function(caption, image_url){...} Defaults to null |
Callback function that gets invoked after
each image change. By default the slideshow uses it to fade out then in
the caption area with the current caption text:
"on_image_change":function(caption, image_url) { This function is fed two parameters each time it's called- the caption of the current image (if any), and the image's URL. |
on_images_loaded: function(){...} Defaults to null |
Callback function that gets invoked when all images have preloaded and slideshow has started. |
on_pause: function(){...} Defaults to null |
Callback function that gets invoked when the
slideshow is paused. This can happen either manually, when the pause
function is called to pause the slideshow, or automatically, when the "loops "
option above is defined and the slideshow has completed the last
iteration.One use of the "on_pause" option is to show a "resume" button once the slideshow is paused to allow the user to resume playing it. |
on_resume: function(){...} Defaults to null
|
Callback function that gets invoked when the slideshow has resumed playing after being paused. To resume playing a slideshow after it's paused, call the "resume" method. |
Manually pausing/ resuming a slideshow
Once a slideshow has initialized, there are two ways it can pause- first is
automatically if the "loops
" option is set to an integer, and
second is if you manually pause it. The later can be accomplished by calling
smoothslider()
again on the image container, but with the keyword
"pause" as the first parameter:
$("#pan_area").smoothslider("pause")
Notice how the 2nd parameter isn't defined at all. To manually resume the slideshow, call the same code with the keyword "resume" instead:
$("#pan_area").smoothslider("resume")
The above lines should be called inside your own code whenever you wish to pause/ resume the slideshow. For example, the following creates a "pause" link:
<a href="#" onClick="javascript:$('#pan_area').smoothslider('pause')">Pause Slideshow</a>
Manually configuring the transition effect for a particular slide
By default the transition applied to each image is done automatically and
randomly by the script, panning and zooming as it sees fit based on the
available image size. You can override this with the transition pattern of your
choice based on four variables- "x1", "x2", "y1", "y2", "z1", and "z2". To
manually set the transition for a particular slide, make use of the "slide
"
option when defining your images inside "playlist[]
":
"playlist":[
{"url":"img/img0.jpg",
"caption":"Zoom 1n",
"slide":{"z1":1, "z2":1.5}}, // zoom in
(magnification from 1 to 1.5)
{"url":"img/img1.jpg",
"caption":"Zoom Out",
"slide":{"z1":2, "z2":1}}, // zoom out
{"url":"img/img2.jpg",
"caption":"Pan up",
"slide":{"y1":0, "y2":200}}, // pan up
{"url":"img/img3.jpg",
"caption": "Pan left",
"slide":{"x1":0, "x2":20, "z1":1}}, // pan left
{"url":"img/img4.jpg", "caption":"No Slide Animation","slide":{}}
// no slide
],
The "x" and "y" variables specify horizontal and vertical movements
respectively, where 0 is default image position, and an integer larger
than 0 moves the image either right or up. The "z" variables specify
zoom (integer greater than 0). If the slide
option is set
to an empty set {}
, then no transition will be added to
this image (unlike the default setting, which is a random transition).
Manually configuring the transition may not always produce the effect you
intended. Certain settings that force the image to have to be enlarged beyond a
reasonable degree if implemented are aborted, such as panning the image to
the right all the way by 300px: "slide":{"x1":0, "x2":300}
This setting in order for it to be adopted while ensuring the image still spans
the entire container it's in means the image would have to be scaled up
excessively.