about

popSlides is a jQuery plugin that allows you to easily create lightbox-style image slideshows that floats overtop the web page ( qseudo-popup ).

It is at this moment a very simple plugin and has minimal customization options. Although the idea was to make things simple, I will implement more options and runtime functionality in the future, granted I have time.

Tested browsers:

  • Internet Explorer 7 +
  • Firefox 3.5 +
  • Google Chrome 6 +
  • Safari 5 +
  • Opera 10 +

v1.2 plans:

  • options for customizing look by choosing themes
  • options for customizing transition effects
  • allow direct calls with image sources (in json format), which returns an element that can be dynamically inserted.

popSlides is created by Yuxi You (Evan) and is fully open source, licensed under the MIT license. If you got any questions, suggestions or bug reports, feel free to contact me at yyx990803@gmail.com.

how to use

  1. Download and extract, place it ( the "popSlides" folder ) in your js folder.
  2. Load up jQuery: ( compatible only up to 1.9.0 )
    <script type="text/javascript" src="js/jquery.js"></script>
  3. Load up popSlides:
    <script type="text/javascript" src="js/popSlides/popSlides.js"></script>
  4. Mark up your images:
    <div class="pop">
        <img src="001.jpg" />
        <img src="002.jpg" />
        <img src="003.jpg" />
    </div>
    or
    <ul class="pop">
        <li><img src="001.jpg" /></li>
        <li><img src="002.jpg" /></li>
        <li><img src="003.jpg" /></li>
    </ul>
  5. Your images will automatically be resized into thumbnails of the same height. If your images are big, this might cause the page to load relatively slow. To avoid that, you can create your own thumbnails and wrap them in an <a> tag pointing to the original image:
    <a href="001_big.jpg">
        <img src="001_thumbnail.jpg">
    </a>
  6. If you want to add captions to your images, you will have to use <ul> as a container. Inside each <li>, add in a <span> which contains your caption for that image:
    <li>
        <a href="001_big.jpg"><img src="001_thumbnail.jpg"></a>
        <span>This is the caption to image 001</span>
    </li>
  7. When you're done with the markup, fire up popSlides:
    ( It is best to insert this in the document body, right after the element containing your images )
    <script type="text/javascript">
        $('.pop').popSlides();
    </script>
  8. Check out the documentation for more details.

documentation

jQuery.popSlides([settings])

An example call with all the default settings:

$(.pop).popSlides({
    play:false,
    play_time:3000,
    max_width:800,
    max_height:600,
    thumbnail_size:80,
    slide_progress:true,
    force_compress:false,
    force_square:false,
    single_thumbnail:false,
    image_number: true,
    caption_position: 'bottom',
});
  • playDefault: false

    Specifies whether the slideshow will be playing when it is first launched.
  • play_timeDefault: 4000

    Specifies the time interval between slides in milliseconds.
  • max_wdith, max_heightDefault: 800, 600

    Specifies the maximum width and height of the popup image.
  • thumbnail_sizeDefault: 80

    Specifies the size of the thumbnails.
  • slide_progressDefault: true

    Specifies whether to show a progress bar indicating the time between slide transitions.
  • force_compressDefault: false

    If this value is set to true, all thumbnails, including those wrapped inside <a> tags will be resized. Otherwise images inside <a> tags are treated as provided thumbnails and will not be resized.
  • force_squareDefault: false

    If this value is set to true, all thumbnails that are subject to resize will be resized into squares and will lose their original proportions. Otherwise the proportions will be preserved, and the thumbnails will all be of the same height as specified by thumbnail_size.
  • single_thumbnailDefault: false

    If this value is set to true, only one thumbnail will be displayed.
  • image_numberDefault: true

    Specifies whether to show the image numbers on the upper left corner.
  • caption_positionDefault: 'bottom'

    Specifies the position of the caption. Default option is 'bottom', the other available option is 'top'.
  • pathDefault: path

    popSlides automatically detects its directory url so that it can load the related images and stylesheets inside the popSlides folder. Normally you don't need to change this value. However, if you use tools such as minify to combine serveral javascript files, you will have to specifically set this value to the actual path of the popSlides folder, e.g." js/popSlides/ "

change log

  • 2013-07-09:

    • This project is no longer maintained.
  • 2010-11-29: v1.1.1

    • Fixed a minor bug to avoid using resource when the plugin is not in use.
  • 2010-11-28: v1.1

    • Added slideshow progress bar.
    • Added the functionality which allows the user to add captions for their images and customize the position of the caption.
  • 2010-11-25: v1.0

    • Initial release.