Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<meta name="description" content="Handmade picture gallery: #slideshow http://www.feelouttheform.net/handmade-slideshow/" />
<!--
  Here you have the paragraph containing the thumbnails.
  Each thumbnail is composed by a link ('a' tag) inside which you have a picture ('img' tag) and a caption ('span' tag). In its thumbnail shape, this content you only have the picture displayed, the caption is hidden (see the CSS style further). But be careful because it will be the exact same content copied to the gallery description.
-->
<p id="gallery_thumbnails">
  <a onclick="javascript:image_selected(this);" >
        <!--
      For example, the content of this 'a' tag will be copied in the container named 'gallery description' that you can see below.
        -->
        <img src="http://www.feelouttheform.net/wp-content/uploads/2014/08/gloup_paypal.jpg" />
        <span>A screenshot from my portfolio</span>
    </a>
    <a onclick="javascript:image_selected(this);" >
        <img src="http://www.feelouttheform.net/wp-content/uploads/2014/09/avatar_blog.jpg" />
        <span>My awesome logo designed by Carla Sofia</span>
    </a>
    <a onclick="javascript:image_selected(this);" >
        <img src="http://www.feelouttheform.net/wp-content/uploads/2014/08/photonicocarreblanche.png" />
        <span>This is... me!</span>
    </a>
</p>
​
<!--
  After that we just need to declare an empty container in which will be displayed the selected bundle picture+caption.
 -->
<p id="gallery_description"></p>
​
​
 
/* GALLERY THUMBNAILS
--------------------- */
​
/* Thumbnails are composed by an image and a span. Here is the image style. */
#gallery_thumbnails a img {
    /* Thumbnails are small images, here I chose 50x50 px.
       The use of 'max-width' instead of 'width' allow the thumbnail to fit the width of the resized picture if the picture is in portrait orientation (i.e. height is bigger than width).
       To revert this behavior, just put 'width' instead of 'max-width' and 'max-height' instead of 'height'.
    */
    height: 50px;
    max-width: 50px;
    /* They have a transparent border that change color depending on the actions */
    border: 3px solid transparent;
    /* The cursor is a hand */
    cursor: pointer;
}
​
/* Thumbnails are composed by an image and a span. Here is the span style. */
#gallery_thumbnails a span {
    /* Span are hidden in the thumbnail.
       They are visible only in the description, when the the thumbnail is selected.
    */
    display: none;
}
​
/* When a thumbnail is selected, make the inside image border black */
#gallery_thumbnails a.active img {
    border-color: black;
}
​
/* GALLERY DESCRIPTION
---------------------- */
​
/* The container of the slider is called 'description'. It display the image and the hidden span. */
#gallery_description {
  /* Force the container to a certain height. Here I chose 200px. */
    height: 200px;
}
​
/* When the image is in the big description container... */
#gallery_description img {
    /* Let the image fit almost all of the container (we let some space for the span). */
    max-height: 90%;
    /* Display the image as a block allows the span to be below the image, and not at a side. */
    display: block;
}
​
​
 
// Slideshow timer
var slideshow_timer = null;
var slideshow_iterator = -1;
​
/* -------------------------------------
   FUNCTION start_slideshow(interval)
   --> Play the slideshow with the given time interval (in ms).
------------------------------------- */
function start_slideshow(interval) {
    slideshow_timer = null;
    slideshow_iterator = -1;
    // If gallery exists containers exists
    if( document.getElementById('gallery_thumbnails') != null )
    if( document.getElementById('gallery_description') != null) {
        // Do the loop each X seconds
        slideshow_timer = setInterval( _slideshow_loop , interval );
        // Do the loop once immediately
        _slideshow_loop();
    }
    if( slideshow_timer == null) {
        // Cancel the loop
        clearInterval(slideshow_timer);
    }
}
​
/* -------------------------------------
   FUNCTION image_selected(thumbnail, stopslideshow)
   --> Function called when selecting an image in the thumbnail list.
       The thumbnail container ('a' tag) pass himself in parameter
------------------------------------- */
function image_selected(thumbnail, stopslideshow) {
    // Retrieve the containers
    var container = document.getElementById('gallery_thumbnails');
    var description = document.getElementById('gallery_description');
    // If a cancel is asked
    if(stopslideshow==null) {
        // Cancel the loop
        clearInterval(slideshow_timer);
    }
    // Clear any selection mark from all the pictures
    for(var j=0 ; !(container.childNodes[j] === container.lastChild) ; j++ ) {
        container.childNodes[j].className = "";
    }
    container.lastChild.className = "";
    // Put the selection mark on the active picture
    thumbnail.className = "active";
    // Update the view
    description.innerHTML = thumbnail.innerHTML;
}
// Loop playing the slideshow for the gallery
function _slideshow_loop() {
    // Retrieve the container
    var container = document.getElementById('gallery_thumbnails');
    // If the container exists
    if(container) {
        do {
            // Increment the iterator
            slideshow_iterator++;
            // If the iterator is out of range or pointing at the last picture
            if(slideshow_iterator<0 || slideshow_iterator>=container.childNodes.length) {
                // Return to the beginning
                slideshow_iterator = 0;
            }
        } while(!container.childNodes[slideshow_iterator].innerHTML);
        // Set the new image selected
        image_selected( container.childNodes[slideshow_iterator] , true );
    } else {
        // Cancel the loop
        clearInterval(slideshow_timer);
    }
}
​
// Start the slideshow with an interval of 4 seconds.
start_slideshow(4000);
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
nicolasformpro
0viewers