Download v.4.0

Introducing the MiniSlideshow 4.0 for Gallery2 and Gallery3

Better, stronger, faster... It's a jQuery plugin!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.minislideshow.4.0.min.js"></script>
<script>
    $('#mini').minislideshow({options});
</script>
    

Options: (defaults shown)

url: '',    // url to fetch our item list. Could be G2 or G3 RSS feeds or REST interfaces.
provider: 'xml',    // What type of interface to expect possible values: 'xml', 'rest' and 'g3rest'
width: 180,    // desired height/width, the images will scale to fit (scale down only)
height: 180,
delay: 5,    // delay between slides - transitions add a little extra time
recursive: false, // If using G2/G3 built-in RSS feeds should we recurse through the atom:next links loading the whole album?
shuffle: false,    // shuffle our results? possible values: true/false
link: true,    // link to the item's gallery view? possible values: true/false
altlink: '',    // alternate link for every item
target: '_blank',    // link target possible values: '_blank', '_new', 'self', '_parent'
fullsize: false,    // use full sized images instead of thumbs? possible values: true/false
resize: false,    // if using fullsize above do we use gallery built resizes? possible values: true/false
radius: '0px',    // add nice curved corners?  possible values: any pixel/percent value
dropshadow:    // the default is to show a dropshadow, to override use your own css or empty {} to cancel
{
    '-webkit-box-shadow': '3px 3px 5px rgba(0, 0, 0, .7)',
    '-moz-box-shadow': '3px 3px 5px rgba(0, 0, 0, .7)',
    'box-shadow': '3px 3px 5px rgba(0, 0, 0, .7)'
},
font: 'sans-serif',    // title font. You can use an entire font stack
fontscale: 20,    // we take the width, divide it by the fontscale for our px and multiply that by 1.618 for line-height
g3_itemid: 1,    // G3 REST specific, the album id
g3_max_items: 24    // G3 REST specific, maximum number of slides. I reccommend no more than 24(page weight and all)
    

**note**

If you're using G2, you'll want to use the included mediaRss.php or rest.php. Place them in your G2 root directory and use them much like my mediaBlock.

 

Examples:

• + G2 Custom RSS(mediaRss.php)

  Your target div

  
  <div id="mini">
      <strong>Javascript required to view this content.</strong>
  </div>
                              

  And activate w/ some simple javascript

  
  <script>
  $('#mini').minislideshow({
      url: '/gallery2/mediaRss.php?mode=dynamic&g2_view=dynamicalbum.RandomAlbum&g2_albumId=32&maxSize=640',
      width: 600,
      height: 400,
      fullsize: true,
      fontscale: 22,
      font: '"Lucida Grande", Tahoma, Verdana, Arial, sans-serif',
      radius: '20px'
  });
  </script>
                              

• + G2 Slideshow Module's RSS

  Your target div

  
  <div id="mini-cars">
      <strong>Javascript required to view this content.</strong>
  </div>
                              

  And activate w/ some simple javascript

  
  <script>
  $('#mini-cars').minislideshow({
      url: '/gallery2/main.php?g2_view=slideshow.SlideshowMediaRss&g2_itemId=1400',
      width: 160,
      height: 160,
      delay: 2,
      fontscale: 14,
      dropshadow: {},
      link: false,
      recursive: true
  });
  </script>
                              

• + G3 Built-in RSS

  Your target div

  
  <div id="mini-g3">
      <strong>Javascript required to view this content.</strong>
  </div>
                              

  And activate w/ some simple javascript

  
  <script>
  $('#mini-g3').minislideshow({
      url: '/gallery3/rss/feed/gallery/album/114',
      width: 200,
      height: 160,
      delay: 6,
      link: false,
      altlink: 'http://testr.suprsidr.com/m/#18',
      radius: '10px',
      shuffle: true
  });
  </script>
                              

• + G2 Cross-domain Custom REST(rest.php)

  Your target div

  
  <div id="mini-json">
      <strong>Javascript required to view this content.</strong>
  </div>
                              

  And activate w/ some simple javascript

  
  <script>
  $('#mini-json').minislideshow({
      provider: 'rest',
      url: 'http://testr.suprsidr.com/rest.php?mode=dynamic&g2_view=dynamicalbum.RandomAlbum&g2_albumId=18&maxSize=640',
      width: 640,
      height: 480,
      delay: 4,
      fontscale: 22,
      fullsize: true,
      resize: true
  });
  </script>
                              

• + G3 Cross-domain REST

  Your target div

  
  <div id="mini-g3json">
      <strong>Javascript required to view this content.</strong>
  </div>
                              

  And activate w/ some simple javascript

  
  <script>
  $('#mini-g3json').minislideshow({
      provider: 'g3rest',
      url: 'http://suprsidr.com/rest',
      g3_itemid: 114,
      g3_max_items: 24,
      width: 260,
      height: 190,
      delay: 4,
      fontscale: 14,
      shuffle: true
  });
  </script>
                              

Download v.4.0

 

Future plans:

I'd like to add some more transitions.