System Message - 12/09 09:22AM  

You have been successfully logged out.


 

FYW_banner

me The other day I found myself updating a site we had built ~6yrs ago. My own minislideshow now depreciated w/ Apple's decision to exclude Flash in IOS, to Adobe's decision to scrap the mobile flash platform... it was a good while it lasted.
With a tear in my eye, I decided to move to a custom html/js iDevice friendly solution. As sad as I was that my popular Minislideshow was in need of replacement, I also took the opportunity to initiate the redux.

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>
                                

 

Future plans:

I'd like to add some more transitions.

 

Forum Topic Last Post