jquery - Parallax slider -
i have used parallax script tutorial http://tympanus.net/codrops/2011/01/03/parallax-slider/
i have posted fiddle here http://jsfiddle.net/rob475/ztrac/3/
i need know how can place buildings in gaps. distance between hyperlinked buildings varied.
is possible script using?
any advice or tips appreciated
(function($) { $.fn.parallaxslider = function(options) { var opts = $.extend({}, $.fn.parallaxslider.defaults, options); return this.each(function() { var $pxs_container = $(this), o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts; //the main slider var $pxs_slider = $('.pxs_slider',$pxs_container), //the elements in slider $elems = $pxs_slider.children(), //total number of elements total_elems = $elems.length, //the navigation buttons $pxs_next = $('.pxs_next',$pxs_container), $pxs_prev = $('.pxs_prev',$pxs_container), //the bg images $pxs_bg1 = $('.pxs_bg1',$pxs_container), $pxs_bg2 = $('.pxs_bg2',$pxs_container), $pxs_bg3 = $('.pxs_bg3',$pxs_container), //current image current = 0, //the thumbs container $pxs_thumbnails = $('.pxs_thumbnails',$pxs_container), //the thumbs $thumbs = $pxs_thumbnails.children(), //the interval autoplay mode slideshow, //the loading image $pxs_loading = $('.pxs_loading',$pxs_container), $pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container); //first preload images var loaded = 0, $images = $pxs_slider_wrapper.find('img'); $images.each(function(){ var $img = $(this); $('<img/>').load(function(){ ++loaded; if(loaded == total_elems*2){ $pxs_loading.hide(); $pxs_slider_wrapper.show(); //one images width (assuming images have same sizes) var one_image_w = $pxs_slider.find('img:first').width(); /* need set width of slider, of each 1 of elements, , of navigation buttons */ setwidths($pxs_slider, $elems, total_elems, $pxs_bg1, $pxs_bg2, $pxs_bg3, one_image_w, $pxs_next, $pxs_prev); /* set width of thumbs , spread them evenly */ $pxs_thumbnails.css({ 'width' : one_image_w + 'px', 'margin-left' : -one_image_w/2 + 'px' }); var spaces = one_image_w/(total_elems+1); $thumbs.each(function(i){ var $this = $(this); var left = spaces*(i+1) - $this.width()/2; $this.css('left',left+'px'); if(o.thumbrotation){ var angle = math.floor(math.random()*41)-20; $this.css({ '-moz-transform' : 'rotate('+ angle +'deg)', '-webkit-transform' : 'rotate('+ angle +'deg)', 'transform' : 'rotate('+ angle +'deg)' }); } //hovering thumbs animates them , down $this.bind('mouseenter',function(){ $(this).stop().animate({top:'-10px'},100); }).bind('mouseleave',function(){ $(this).stop().animate({top:'0px'},100); }); }); //make first thumb selected highlight($thumbs.eq(0)); //slide when clicking navigation buttons $pxs_next.bind('click',function(){ ++current; if(current >= total_elems) if(o.circular) current = 0; else{ --current; return false; } highlight($thumbs.eq(current)); slide(current, $pxs_slider, $pxs_bg3, $pxs_bg2, $pxs_bg1, o.speed, o.easing, o.easingbg); }); $pxs_prev.bind('click',function(){ --current; if(current < 0) if(o.circular) current = total_elems - 1; else{ ++current; return false; } highlight($thumbs.eq(current)); slide(current, $pxs_slider, $pxs_bg3, $pxs_bg2, $pxs_bg1, o.speed, o.easing, o.easingbg); }); /* clicking thumb slide respective image */ $thumbs.bind('click',function(){ var $thumb = $(this); highlight($thumb); //if autoplay interrupt when user clicks if(o.auto) clearinterval(slideshow); current = $thumb.index(); slide(current, $pxs_slider, $pxs_bg3, $pxs_bg2, $pxs_bg1, o.speed, o.easing, o.easingbg); }); /* activate autoplay mode if option specified */ if(o.auto != 0){ o.circular = true; slideshow = setinterval(function(){ $pxs_next.trigger('click'); },o.auto); } /* when resizing window, need recalculate widths of slider elements, based on new windows width. need slide again current one, since left of slider no longer correct */ $(window).resize(function(){ w_w = $(window).width(); setwidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev); slide(current, $pxs_slider, $pxs_bg3, $pxs_bg2, $pxs_bg1, 1, o.easing, o.easingbg); }); } }).error(function(){ alert('here') }).attr('src',$img.attr('src')); }); }); }; //the current windows width var w_w = $(window).width(); var slide = function(current, $pxs_slider, $pxs_bg3, $pxs_bg2, $pxs_bg1, speed, easing, easingbg){ var slide_to = parseint(-w_w * current); $pxs_slider.stop().animate({ left : slide_to + 'px' },speed, easing); $pxs_bg3.stop().animate({ left : slide_to/2 + 'px' },speed, easingbg); $pxs_bg2.stop().animate({ left : slide_to/4 + 'px' },speed, easingbg); $pxs_bg1.stop().animate({ left : slide_to/8 + 'px' },speed, easingbg); } var highlight = function($elem){ $elem.siblings().removeclass('selected'); $elem.addclass('selected'); } var setwidths = function($pxs_slider, $elems, total_elems, $pxs_bg1, $pxs_bg2, $pxs_bg3, one_image_w, $pxs_next, $pxs_prev){ /* width of slider windows width times total number of elements in slider */ var pxs_slider_w = w_w * total_elems; $pxs_slider.width(pxs_slider_w + 'px'); //each element have width = windows width $elems.width(w_w + 'px'); /* set width of each bg image div. value same calculated pxs_slider */ $pxs_bg1.width(pxs_slider_w + 'px'); $pxs_bg2.width(pxs_slider_w + 'px'); $pxs_bg3.width(pxs_slider_w + 'px'); /* both right , left of navigation next , previous buttons be: windowwidth/2 - imgwidth/2 + margin (not touch image borders) */ var position_nav = w_w/2 - one_image_w/2 + 3; $pxs_next.css('right', position_nav + 'px'); $pxs_prev.css('left', position_nav + 'px'); } $.fn.parallaxslider.defaults = { auto : 0, //how many seconds periodically slide content. //if set 0 autoplay turned off. speed : 1000,//speed of each slide animation easing : 'jswing',//easing effect slide animation easingbg : 'jswing',//easing effect background animation circular : true,//circular slider thumbrotation : true//the thumbs randomly rotated }; //easeinoutexpo,easeinback })(jquery); thanks
for correct effect want receive first of must change dimentions absolute dimentions ( px) scalable (like %).
you can change resolution of window , see in variants buildings placed in gaps, script works well. see attached image.
Comments
Post a Comment