new_sdk_wu/www/new_sdk/public/static/js/slider.js

$(document).ready(function () {
    $('#slider').slider({ speed: 500 });
});
(function($) {
    $.fn.extend({
        slider: function(options) {
            var settings = $.extend({
                speed: 500

            },
            options);
            return this.each(function() {
                var slidercontents = $(this).addClass('image-slider-contents');
                var slider = $('<div/>').addClass('image-slider').attr('id', slidercontents.attr('id'));
                var backbutton = $('<div/>').addClass('image-slider-back');
                var forwardbutton = $('<div/>').addClass('image-slider-forward');
                slidercontents.removeAttr('id');
                slidercontents.before(slider);
                slider.append(backbutton);
                slider.append(slidercontents);
                slider.append(forwardbutton);
                var total = $('> div', slidercontents).length;
                var left = 0;
                var w;
                var width;
                var maxScroll;




                slider.append($('<div/>').css('display', 'none').addClass('preview').append($('<div/>').addClass('img-large')



                .append($('<div/>').html('&nbsp').click(function(e) {
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    //display previous image
                    var img = $(this).parent().find('img');
                    var index = parseInt(img.attr('class'));
                    img.removeAttr('class');
                    if (index > 1) {
                        index--;
                        var src = $('.' + index + ' div img').attr('src');
                        var txt = $('.' + index + ' div a').html();
                        $('.preview').find('.label').html(txt);
                        $('.preview').find('img').addClass('' + (index) + '').attr('src', src).stop(false, true).animate({
                           
                        },
                        1000);
                        
                        if(index==1){
                            $( ".left" ).css( "background" ,"url(../../../static/images/home/left-gray.png)");
                            $( ".right" ).css( "background" ,"url(../../../static/images/home/right.png)");
                        }else{
                            $( ".left" ).css( "background" ,"url(../../../static/images/home/left.png)");
                            $( ".right" ).css( "background" ,"url(../../../static/images/home/right.png)");
                        }
                     
                     
                    }
                    else{
            
                    }
                    $('.preview').find('img').addClass('' + (index) + '');

                }).addClass('left'))
                .append($('<div/>').html('&nbsp').click(function(e) {
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    //display next image
                    var img = $(this).parent().find('img');
                    var index = parseInt(img.attr('class'));
                    img.removeAttr('class');
                    if (index < total) {
                        index++;
                        var src = $('.' + index + ' div img').attr('src');
                        var txt = $('.' + index + ' div a').html();
                        $('.preview').find('.label').html(txt);

                    
                        $('.preview').find('img').addClass('' + (index) + '').attr('src', src).stop(false, true).animate({
                     
                        },
                        1000);
                        if(index==total){
                            $( ".right" ).css( "background" ,"url(../../../static/images/home/right-gray.png)");
                            $( ".left" ).css( "background" ,"url(../../../static/images/home/left.png)");
                        }else{
                            $( ".right" ).css( "background" ,"url(../../../static/images/home/right.png)");
                        $( ".left" ).css( "background" ,"url(../../../static/images/home/left.png)");
                        }
                     
                    }
                    else{

                    }
                    $('.preview').find('img').addClass('' + (index) + '')
                    
                }).addClass('right'))
                
           
                .append($('<img/>'))).append($('<div/>').addClass('label').css('opacity', '0.8'))
                .append($('<div/>').addClass('close').click(function(e) {
                    $(this).parent().fadeOut("slow");
                    $('.preview .img-large img').removeAttr('class');
                })));
                // $(document).click(function(e) {
                //     if ($('.preview').css('display') == 'block')
                //     $('.preview').fadeOut("slow");

                // });

                function initialize() {
                    var tempElements = $('> div', slidercontents);
                    var allElements = new Array();
                    tempElements.each(function(index, el) {
                        allElements.push($('<div/>').addClass('' + (index + 1) + '').addClass('outer').append(el));

                    });

                    allElements = $(allElements);
                    $('> div', slidercontents).remove();
                    var wrapper = $('<div/>').addClass('contents-wrapper');
                    allElements.each(function(index, el) {

                        wrapper.append($(el));

                    });
                    slidercontents.append(wrapper);
                    var w = $('.outer:eq(0)', slidercontents).outerWidth() + parseFloat($('.outer:eq(0)', slidercontents).css('margin-left')) + parseFloat($('.outer:eq(0)', slidercontents).css('margin-right'));
                    var width = (total ) * w;
                    var maxScroll = width - $('.image-slider-contents').outerWidth();
                    wrapper.css({
                        width: width
                    });
                    $('> div > div', slidercontents).css('display', '');
                  
                    $('.outer a').click(function(e) {
                        e.stopPropagation();
                        e.stopImmediatePropagation();


                    });
                    $('.outer').hover(function() {
                        $(this).addClass('active');
                    },
                    function() {
                        $(this).removeClass('active');
                    }).click(
                    function(e) {
                        e.stopPropagation();
                        e.stopImmediatePropagation();
                        var cls = $(this).attr('class').split(' ')[0];
                        var p = $(this).find('div');
                        var img = p.find('img').attr('src');
                        var preview = $('.preview');
                        var l = $('.image-slider').width() / 2 - preview.outerWidth() / 2;
                        var t = (p.offset().top - preview.height());
                        t -= t / 2;
                        preview.css({
                            left: l,
                            top: t
                        });
                        var text = p.find('a').html();
                        preview.find('img').attr('src', img).addClass(cls);
                        preview.find('.label').html(text);
                        preview.fadeIn("slow");
                         
                        if($(".preview .img-large img").hasClass('1')){
                            $( ".left" ).css( "background" ,"url(../../../static/images/home/left-gray.png)");
                            $( ".right" ).css( "background" ,"url(../../../static/images/home/right.png)");
                        }else if($(".preview .img-large img").hasClass(total)){
                            $( ".right" ).css( "background" ,"url(../../../static/images/home/right-gray.png)");
                            $( ".left" ).css( "background" ,"url(../../../static/images/home/left.png)");
                        }else{
                            $( ".left" ).css( "background" ,"url(../../../static/images/home/left.png)");
                            $( ".right" ).css( "background" ,"url(../../../static/images/home/right.png)");
                        }

                    });

                 }
                initialize();

                function getDimensions(value) {
                    return value + 'px';

                }


            });

        }

    });

})(jQuery);