Slidebox How To

This component allows you to create an image slideshow which degrades gracefully when javascript isn't available.

Demo

 http://js.sapo.pt/SAPO/Component/Slidebox/sample/



Initial configuration

To use this component you need the following files:

<link href="http://js.sapo.pt/Assets/Images/Gallery/style.css" type="text/css" media="screen" rel="Stylesheet" />
<script type="text/javascript" src="http://js.sapo.pt/SAPO/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Event/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Element/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Css/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Utility/Dimensions/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Effects/Core/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Effects/Fade/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Dialog/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Gallery/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Slidebox/0.1/"></script>

The stylesheet can be omitted but in that case you need to specify similar css styles to those you can find on that file, so that the behavior can work perfectly.



First mode: html list

Necessary HTML code

<div id="gallery" class="SAPOSlidebox">
    <a href="#" class="first">First</a>
    <a href="#" class="previous">Previous</a>
    <a href="#" class="next">Next</a>
    <a href="#" class="last">Last</a>
    <ul class="thumbs">
        <li>
            <a href="http://image.url/file_original.jpg" title="image title">
                <img src="http://image.url/file_thumbnail.jpg" alt="image title" />
            </a>
            <div class="caption">Image caption</div>
        </li>
	</ul>
</div>
  • The container div id can be specified by the user
  • The links are optional and the available links are previous/next or first/last.
  • The caption div is also optional
  • The present css classes are necessary for the component to work and can also be used for styling the component
  • The previous/next links have a disabled class when you are on the first/last image, respectively.
  • In the generated code there will be a container with a SAPOGalleryStage class for the image which is currently being shown.
  • In the generated code, there will be 2 links previous/next which show up when you hover the image, with classes prev/next and disabled when in the first/last image. These links are inside the div with the SAPOGalleryStage gallery.



Necessary JS code

new SAPO.Component.Slidebox({
    container: "gallery"
});

Don't forget to put this code inside a dom ready or just at the end of the page.

Beside the container parameter, which indicates the element which contains the HTML structure necessary for the gallery, there are other additional parameters:

  • hoverControls (default: true): Activates prev/next buttons which show up when you hover the image.
  • hoverThumbs (default: false): Uses thumbnails instead of text on the hover links
  • navThumbs (default: false): Uses thumbnails on the external prev/next links.
  • prevLabel (default: Anterior): Previous hover link label
  • nextLabel (default: Próxima): Next hover link label
  • onChange (default: false): Callback executed on each image change
  • showCaption (default: true): Show the caption
  • initialWidth (default: 50): Initial width of the popup before it is readjusted to the image size
  • initialHeight (default: 50): Initial height of the popup before it is readjusted to the image size



Second mode: create the slideshow programatically

Necessary JS code

new SAPO.Component.Slidebox({
	list: [
		{
			href: "http://image.url/file_original.jpg",
			thumb: "http://image.url/file_thumbnail.jpg",
			title: "image title",
			caption: "image caption"
		}
	]
});