System Message - 08/27 03:51AM  

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.

 

IE 10 the struggle may be over

 Email Article To a Friend View Printable Version Bookmark

ie10For way to many years, web developers have been struggling with Internet Explorer with each version bringing its own new challenges. Web developers had to create kludges/shims to get the same functionality from the browser that one expects to get from the other major vendors. IE9's release brought the browser's compatibility to its highest level in respect to new HTML5/CSS3 specs. It still had its own set of challenges and new shims were created to bring up the level of support.

Enter IE10 with automatic updating - Hallelujah!!

MSFT has finally taken the steps necessary to keep its IE users up to date the same way all the other major browser vendors have. The screenshot on the right is from the Win7 Pre-Release, Win8 users automatically get IE10.

Check out Paul Irish's Skinny on IE update policy for further info.

I found the experience surprisingly pleasant and each of my sites rendered as expected. Javascript execution seems very fast and media elements looked superior to the other browser's offerings. In addition, the Developer's tools: javascript console, Net panel, etc. are all top notch.

Way to go Microsoft :)

-s

Forum Topic Last Post
Follow us on twitter
What's New

Stories

No new stories

NEW FILES last 14 days

No new files
No new comments

Latest Media Items

Hydrangeas (Medium)
 
 
Penguins
 
 
5870930243_a6537e9416_b
 
 
firstcabbageoftheyear
 
 
thief
 
 
garden-27-april-2011-12
 
 
garden-27-april-2011-6
 
 
celosia
 
 
Big Cats of Foley