Slide Presentation 1.0

Created Saturday 20th of March 2010 by Andreas Lagerkvist
Copyright © 2010 Andreas Lagerkvist (andreaslagerkvist.com)

What it Does

A sort of slide/presentation kind of plug-in. Displays sliding images with text floating on top. This one's pretty specific but perhaps someone will find it useful.

How to Use

Each slide in the presentation should be in its own li. Inside the li there should be one image and one or more <p>aragraphs of text you want displayed on top of the image.

With the HTML in place simply run the plug-in on a container of the ul.

Example

  • aFramework is an open source PHP web development framework.

    Regardless if you're creating something completely unique or just another blog - aFramework will help you do it quicker.

  • A typical website built on aFramework.

    This one uses both aBlog and aCMS.

  • The same page logged in as admin.

    You can now edit and insert content.

Example Code

HTML

<div id="jquery-slide-presentation-example">
<
ul>
    <
li>
        <
img src="/aFrameworkCom/Files/guide/0-intro.png" alt=""/>
        <
p>aFramework is an open source PHP web development framework.</p>
        <
p>Regardless if you're creating something completely unique or just another blog - aFramework will help you do it quicker.</p>
    </li>
    <li>
        <img src="/aFrameworkCom/Files/guide/1-home.png" alt=""/>
        <p>A typical website built on aFramework.</p>
        <p>This one uses both aBlog and aCMS.</p>
    </li>
    <li>
        <img src="/aFrameworkCom/Files/guide/2-admin-home.png" alt=""/>
        <p>The same page logged in as admin.</p>
        <p>You can now edit and insert content.</p>
    </li>
</ul>
</div>

JS

// Wait for images to load...
$(window).load(function () {
    $(
'#jquery-slide-presentation-example').slidePresentation();
});

Source Code

jQuery.fn.slidePresentation = function () {
    return 
this.each(function () {
        var 
container = $(this).scrollTo(0, {axis'y'}).addClass('jquery-slide-presentation');
        var 
scrollOverStep = function (num) {
            var 
guide            container.addClass('scrolling-fast');
            var 
li                guide.find('li').eq(num);
            var 
pointDuration    4000;
            var 
guideWidth        guide.width();
            var 
guideHeight        guide.height();

            if (!
li.length) {
                
li guide.find('li').eq(num 0);
            }

            
guide.scrollTo(li, {
                
axis'y'
                
durationnum 1000 0
                
onAfter: function () {
                    
guide.removeClass('scrolling-fast');

                    var 
img                li.find('img');
                    var 
imgHeight        Math.round(img.height() * (guideWidth img.width()));
                    var 
scrollAmnt        imgHeight guideHeight;
                    var 
points            li.find('p');
                    var 
numPoints        points.length;
                    var 
heightPerPt        Math.round(scrollAmnt numPoints);
                    var 
guideDuration    numPoints pointDuration;

                    
// Move all points and "zoom in" the image
                    
points.css('top', (imgHeight 300) + 'px');

                    
// Scroll in each point
                    
var 0;
                    var 
scrollInPoint = function () {
                        var 
pointTop parseInt(heightPerPt guideHeight heightPerPt 410);

                        
points.eq(i).animate({toppointTop 'px'}, 500'noEasing', function () {
                            var 
= $(this);

                            
t.animate({topparseInt(pointTop heightPerPt 210) + 'px'}, pointDuration 1000'noEasing', function () {
                                
t.animate({top'-300px'}, 500);
                            });
                        });

                        
i++;
                    };

                    
scrollInPoint();
                    var 
pointsInterval setInterval(scrollInPointpointDuration);

                    
// Zoom out the page
                //    img.animate({width: '940px'}, 3000, 'noEasing');

                    // Scroll slowly over this step for 5 seconds * number of "points"
                    
guide.scrollTo('+=' scrollAmnt, {
                        
axis:        'y'
                        
duration:    guideDuration
                        
easing:        'noEasing'
                        
onAfter:    function () {
                            
clearInterval(pointsInterval);
                            
scrollOverStep(++num);
                        }
                    });
                }
            });
        };

        
scrollOverStep(0);
    });
};

Download

Plug-in

Requires

blog comments powered by Disqus

Random jQuery Plug-ins

  • Content Scroller

    Use this plug-in to make a list of elements only show one at a time and every now and then scroll to the next one. The plug-in scrolls in infinty, sta...

    Details

  • Vibrate

    This plug-in makes any element you want "vibrate" every now and then. Can be used in conjunction with blink for maximum annoyance!

    Details

  • Tag Sizes

    Use this plug-in on a list of tags (li:s) and it will use whatever numbers found in the list to give each tag a corresponding size.

    Details

More Plug-ins

Recent Comments

Powered by Disqus
Page cached. Loaded in: 0.0106 second(s).
Last DB change: 2012-04-02 11:06:05
Last file change: 2012-04-25 20:30:39
Cache created: 2012-05-18 11:18:14