mtense productions

some stuff you might find useful

Slideshow2 with Gallery2

Posted by on in Techie Stuff
  • Font size: Larger Smaller
  • Hits: 8010
  • Subscribe to this entry
  • Print

Slideshow 2! is a very cool javascript picture antimater / rotator.  It has tons of features including captions and panning (Ken Burns effect).  This little script makes it easy to jazz up a webpage.  The example below is pulling the images from a directory on the server.

Gallery2 (and soon to be Gallery3) is one of the most popular tools for managing photos on the web.  If you want to highlight your photos outside of Gallery2, it provides a couple of options, but nothing as cool as Slideshow 2! (at least not that I could find).

With a little hacking of the Gallery2 code, it wasn't too hard to integrate the two and have Slideshow 2! pull images from Gallery2.  See the example below that is pulling images from my personal Gallery2 installation and using the Album titles for the captions.

These examples are running inside Joomla, so they are a bit more complicated than what you need to integrate Slideshow 2! and Gallery2 on your site.

The steps below will help you put your Gallery2 images into a slideshow.

First, download and install Slideshow 2!. To install, unzip the download into some temporary location and then upload the files to your website.

Warning: the Slideshow 2! package includes an index.html file. Rename it to something like slideshow.html to prevent overwriting anything important.

Next, test the slideshow and make sure the default installation works for you.

It goes without saying (or not) that the webpage you hooking the slideshow and Gallery2 into needs to be php file.  In this file, you need to add

  • php to retrieve the photos from Gallery2
  • javascript to run the slideshow with the photos
  • div tags to place the slideshow on the page

    Get started by adding the following code to the <head> section of your webpage.

    <script type="text/javascript"> 
      //<![CDATA[ window.addEvent('domready', function() { 
        var data = {
          // physical path to gallery installation
          $galleryPath = $_SERVER['DOCUMENT_ROOT'] . '/gallery';
          // relative URL to gallery installation
          $galleryUri = '/gallery';
          // smallest dimension of viewer set below in Slideshow and in slideslow css
          $minSize = 400;
          // the order type (random, recent, viewed, daily, weekly, monthly)
          // how many items to select
          // limit item selection to descendents of this item (optional)
          g2PrintSlideShow2Images($galleryPath, $galleryUri, $minSize, $order, $count, $parentId);
        var myShow = new Slideshow.KenBurns('show', data, {duration: 5000, controller: true, hu: '', thumbnails: false, captions: true, height: 300, width: 400});
        // var myShow = new Slideshow('show', data, {controller: true, hu: '', thumbnails: false, captions: true, height: 300, width: 400}); }); 

    Update the code above with the proper locations of the Gallery2 installation and the URL to the gallery.

    Whereever you wish to place the slideshow on your webpage add the following code

    <div id="show" class="slideshow"></div>

    Now put the helper php g2GetImages.php file that pulls the images from Gallery2 on the webserver.  You can download it along with an example webpage that already includes all the necessary code.

    Tunes Web Interface for XBMC Classic 1.0 HOT
    (0 votes)

    A simple music-only web interface for xbmc4xbox.  Unzip to xbmc directory and access via http://xbox_ip/tunes.asp.

    Date 2013-04-04 16:10:24 File Size 35.88 KB Download 1532 Download


    Tagged in: Gallery2 PHP Slideshow


    • No comments made yet. Be the first to submit a comment

    Leave your comment

    Guest Sunday, 27 September 2020
    You are here: Home Aaron Slideshow2 with Gallery2