article:
JS Plugin: hoverIntent
article:
JS Plugin: Jcrop - Image Cropping

JS Plugin: Vegas Background

Advertisement

"Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You can even create amazing Slideshows."


Plugin: Vegas Background


Implement

HEAD

javascript
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.vegas.js"></script>

stylesheets
<link rel="stylesheet" type="text/css" href="jquery.vegas.css" />

code javascript
<script>
$( function() {
    var slideshowRunning = false,
        backgroundList = [];

    // Build the background list with href of links
    $( '#menu a' ).each( function() {
        backgroundList.push( {
            src: $( this ).attr( 'href' ),
            valign: $( this ).data( 'valign' ),
            fade: 3000
         } );
     } );
        
    // Define a slideshow with overlay and pause it
    $.vegas( backgroundList[3] )
    ( 'overlay', {
        opacity: 0.5
    })
    ( 'pause' );

    // A short demo
    $( '#menu a' ).click( function() {
    
        // If the SlideShow link is clicked
        if ( $( this ).is( '#slideshow' ) ) {
        
            // Start the SlideShow
            if ( slideshowRunning == false ) {
                slideshowRunning = true;
                
                $( '#pause' )
                    .show()
                    .css( 'opacity', 0.5 )
                    .html( 'PAUSE' );
                    
                $.vegas( 'slideshow', {
                    delay: 5000,
                    backgrounds: backgroundList,
                })
                
            // Pause the SlideShow
             } else {
                slideshowRunning = false;
                
                $( '#pause' )
                    .show()
                    .css( 'opacity', 0.5 )
                    .html( 'PLAY' );
                    
                $.vegas( 'pause' );  
             }
            
           // If a standard Thumbnail is clicked
         } else {
            slideshowRunning = false;
            
            $( '#pause' ).hide();
            $( '#thumbnail' ).attr( 'src', 'images/slideshow.gif' );

            var idx = $( this ).parent( 'li' ).index();
            $.vegas( 'stop' )( backgroundList[idx] );
         }
        
         return false;
     } );
    
    // Apply a border to the right thumbnail when a background is loaded
    $( 'body' ).bind( 'vegasload', function( e, bg ) {        
        var src = $( bg ).attr( 'src' ).replace( 'background', 'thumbnail' );
        
        $( '#menu img' )
            .css( 'border', '1px solid #FFF' );
        $( 'img[src="' + src + '"]' )
            .css( 'border', '1px solid #CF0' );
    });
    
    // Display the right thumbnail instead of the slideshow animated gif when the slideshow is running
    $( 'body' ).bind( 'vegaswalk', function( e, bg ) {
        var src = $( bg ).attr( 'src' ).replace( 'background', 'thumbnail' );
        
        $( '#thumbnail' ).attr( 'src', src );
    });
 } );
</script>


BODY

<ul id="menu">
    <li><a href="images/background-1.jpg" data-valign="top"><img src="images/thumbnail-1.jpg"></a></li>
    <li><a href="images/background-2.jpg" data-valign="top"><img src="images/thumbnail-2.jpg"></a></li>
    <li><a href="images/background-3.jpg" data-valign="top"><img src="images/thumbnail-3.jpg"></a></li>
    <li><a href="images/background-4.jpg" id="slideshow"><span id="pause"></span><img id="thumbnail" src="images/slideshow.gif"></a></li>
</ul>




source
download
github
demo
documentation

Advertisement
Tags: jplugin, vegas, background, overlay, js, javascript, design, develop, web, website, layout, ui, menu, hover,

Leave a Comment

No Comment

© Creative3x Ltd.