SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Parallax slider

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Parallax slider

    Hi

    I have used a parallax script from this tutorial here

    The question i have is how do i place my images (the buildings) in the gaps see here

    Is this possible to do with the script I am using?

    Any advice or tips would be most appreciated

    html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>Parallax Slider with jQuery</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta name="description" content="Parallax Slider with jQuery" />
            <meta name="keywords" content="parallax, jquery, slider, slideshow, rotation, perspective"/>
    		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
            <link rel="stylesheet" type="text/css" href="css/style.css" />
    		<script src="js/cufon-yui.js" type="text/javascript"></script>
    		<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
    		<script type="text/javascript">
    			Cufon.replace('.pxs_loading',{ textShadow: '1px 1px #000'});
    		</script>
        </head>
        <body>
    
    		<div id="pxs_container" class="pxs_container">
    			<div class="pxs_bg">
    				<div class="pxs_bg1"></div>
    				<div class="pxs_bg2"></div>
    				<div class="pxs_bg3"></div>
    			</div>
    			<div class="pxs_loading">Loading images...</div>
    			<div class="pxs_slider_wrapper">
    				<ul class="pxs_slider">
    					<li><img src="images/image1.png" alt="First Image" /></li>
    					<li><img src="images/image2.png" alt="Second Image" /></li>
    					<li><img src="images/image3.png" alt="Third Image" /></li>
    					<li><img src="images/image4.png" alt="Forth Image" /></li>
    					<li><img src="images/image5.png" alt="Fifth Image" /></li>
    					<li><img src="images/image6.png" alt="Sixth Image" /></li>
                        <li><img src="images/hospital.png" alt="Sixth Image" /></li>
    				</ul>
    				<div class="pxs_navigation">
    					<span class="pxs_next"></span>
    					<span class="pxs_prev"></span>
    				</div>
    				<ul class="pxs_thumbnails">
    					<li><img src="images/thumbs/1.jpg" alt="First Image" /></li>
    					<li><img src="images/thumbs/2.jpg" alt="Second Image" /></li>
    					<li><img src="images/thumbs/3.jpg" alt="Third Image" /></li>
    					<li><img src="images/thumbs/4.jpg" alt="Forth Image" /></li>
    					<li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li>
    					<li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
                        <li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li>
    				</ul>
    			</div>
    		</div>
    
    
    		<!-- The JavaScript -->
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <script type="text/javascript">
    			(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 the 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 for the autoplay mode
    						slideshow,
    						//the loading image
    						$pxs_loading	= $('.pxs_loading',$pxs_container),
    						$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
    							
    						//first preload all the 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 all images have the same sizes)
    									var one_image_w		= $pxs_slider.find('img:first').width();
    							
    									/*
    									need to set width of the slider,
    									of each one of its elements, and of the
    									navigation buttons
    									 */
    									setWidths($pxs_slider,
    									$elems,
    									total_elems,
    									$pxs_bg1,
    									$pxs_bg2,
    									$pxs_bg3,
    									one_image_w,
    									$pxs_next,
    									$pxs_prev);
    							
    									/*
    										set the width of the thumbs
    										and 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 the thumbs animates them up and down
    										$this.bind('mouseenter',function(){
    											$(this).stop().animate({top:'-10px'},100);
    										}).bind('mouseleave',function(){
    											$(this).stop().animate({top:'0px'},100);
    										});
    									});
    										
    									//make the first thumb be selected
    									highlight($thumbs.eq(0));
    										
    									//slide when clicking the 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 a thumb will slide to the 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 the autoplay mode if
    									that option was specified
    									 */
    									if(o.auto != 0){
    										o.circular	= true;
    										slideshow	= setInterval(function(){
    											$pxs_next.trigger('click');
    										},o.auto);
    									}
    							
    									/*
    									when resizing the window,
    									we need to recalculate the widths of the
    									slider elements, based on the new windows width.
    									we need to slide again to the current one,
    									since the left of the slider is 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){
    					/*
    					the width of the slider is the windows width
    					times the total number of elements in the slider
    					 */
    					var pxs_slider_w	= w_w * total_elems;
    					$pxs_slider.width(pxs_slider_w + 'px');
    					//each element will have a width = windows width
    					$elems.width(w_w + 'px');
    					/*
    					we also set the width of each bg image div.
    					The value is the same calculated for the pxs_slider
    					 */
    					$pxs_bg1.width(pxs_slider_w + 'px');
    					$pxs_bg2.width(pxs_slider_w + 'px');
    					$pxs_bg3.width(pxs_slider_w + 'px');
    					
    					/*
    					both the right and left of the
    					navigation next and previous buttons will be:
    					windowWidth/2 - imgWidth/2 + some margin (not to touch the 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 to periodically slide the content.
    											//If set to 0 then autoplay is turned off.
    					speed			: 1000,//speed of each slide animation
    					easing			: 'jswing',//easing effect for the slide animation
    					easingBg		: 'jswing',//easing effect for the background animation
    					circular		: true,//circular slider
    					thumbRotation	: true//the thumbs will be randomly rotated
    				};
    				//easeInOutExpo,easeInBack
    			})(jQuery);
    		</script>
    
    		<script type="text/javascript">
    			$(function() {
    				var $pxs_container	= $('#pxs_container');
    				$pxs_container.parallaxSlider();
    			});
            </script>
    
        </body>
    </html>
    css:
    Code:
    *{
    	margin:0;
    	padding:0;
    }
    body{
    	font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
    	font-size:14px;
    	background:transparent url(../images/sky.jpg) no-repeat top left;
    	color:#333;
    	text-shadow:1px 1px 1px #fff;
    	overflow-x:hidden;
    }
    h1{
    	font-size:56px;
    	color:#ccc;
    }
    h2{
    	font-size:20px;
    	padding:10px 0px 10px 0px;
    	margin:15px 0px 20px 0px;
    }
    a{
    	color:#555;
    	text-decoration:none;
    }
    a:hover{
    	color:#222;
    }
    p{
    	padding:5px 0px;
    }
    .wrapper{
    	width:960px;
    	margin:20px auto;
    }
    .clear{
    	clear:both;
    }
    .footer{
    	text-align:center;
    	width:100%;
    	padding:20px 0px;
    	clear:both;
    	margin-top:30px;
    }
    .footer a{
    	margin:0px 20px;
    }
    /* Slider Style */
    .pxs_container{
    	width:100%;
    	height:670px;
    	position:relative;
    	border-top:7px solid #333;
    	border-bottom:7px solid #333;
    	overflow:hidden;
    	-moz-box-shadow:0px 0px 7px #000;
    	-webkit-box-shadow:0px 0px 7px #000;
    	box-shadow:0px 0px 7px #000;
    }
    .pxs_bg{
    	background:transparent url(../images/bg.png) repeat top left;
    }
    .pxs_bg div{
    	position:absolute;
    	top:0px;
    	left:0px;
    	width:7584px; /*1264px window width times number of images*/
    	height:670px;
    	background-repeat:repeat;
    	background-position:top left;
    	background-color:transparent;
    }
    .pxs_bg .pxs_bg1{
    	background-image:url(../images/clouds.png);
    	/*left negative 1/8 of ww*/
    }
    .pxs_bg .pxs_bg2{
    	background-image:url(../images/blurred-buildings.png);
    	/*left negative 1/4 of ww*/
    }
    .pxs_bg .pxs_bg3{
    	background-image:url(../images/cityscape.png);
    	/*left negative 1/2 of ww*/
    }
    .pxs_slider_wrapper{
    	display:none;
    }
    .pxs_container ul{
    	margin:0px;
    	padding:0px;
    	list-style:none;
    }
    ul.pxs_slider{
    	position:absolute;
    	left:0px;
    	top:0px;
    	height:670px;
    }
    ul.pxs_slider li{
    	height:670px;
    	float:left;
    	position:relative;
    }
    ul.pxs_slider li img{
    	display:block;
    	margin:35px auto 0px auto;
    	-moz-box-shadow:0px 0px 7px #222;
    	-webkit-box-shadow:0px 0px 7px #222;
    	box-shadow:0px 0px 7px #222;
    	border: 8px solid transparent;
    	-moz-border-radius:4px;
    	-webkit-border-radius:4px;
    	border-radius:4px;
    }
    ul.pxs_thumbnails{
    	height:35px;
    	position:absolute;
    	top:320px;
    	left:50%;
    }
    ul.pxs_thumbnails li{
    	position:absolute;
    	display:block;
    }
    ul.pxs_thumbnails li img{
    	border: 5px solid #FFFFFF;
    	-moz-box-shadow:1px 1px 7px #555;
    	-webkit-box-shadow:1px 1px 7px #555;
    	box-shadow:1px 1px 7px #555;
    	cursor:pointer;
    	display:block;
    	opacity:0.7;
    }
    ul.pxs_thumbnails li.selected img{
    	opacity:1.0;
    }
    .pxs_navigation span{
    	position:absolute;
    	width:30px;
    	height:60px;
    	-moz-box-shadow:0px 0px 2px #000;
    	-webkit-box-shadow:0px 0px 2px #000;
    	box-shadow:0px 0px 2px #000;
    	top:145px;
    	opacity:0.6;
    	-moz-border-radius:4px;
    	-webkit-border-radius:4px;
    	border-radius:4px;
    	cursor:pointer;
    }
    .pxs_navigation span:hover{
    	opacity:0.9;
    }
    .pxs_navigation span.pxs_prev{
    	background:#000 url(../images/prev.png) no-repeat center center;
    }
    .pxs_navigation span.pxs_next{
    	background:#000 url(../images/next.png) no-repeat center center;
    }
    .pxs_loading{
    	color:#fff;
    	font-size:20px;
    	padding:15px 15px 15px 50px;
    	position:absolute;
    	background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
    	-moz-border-radius:15px;
    	-webkit-border-radius:15px;
    	border-radius:15px;
    	opacity:0.7;
    	width:180px;
    	position:absolute;
    	top:150px;
    	left:50%;
    	margin-left:-90px;
    }


    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have posted a fiddle here Edit fiddle - JSFiddle

    I just need to know how I can place the buildings in the gaps. The distance between the hyperlinked buildings are varied.

    Thanks

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    It's not very clear (to me at least) what you are asking here. Could you give a bit more detail?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph

    If you press each of the nav arrows and scroll all the way to the end, you will see that the background image of the cityscape has gaps in them.

    Each building hotspot (that are floating in mid air at the moment on a white square with a drop shadow) need to be placed in these gaps.

    How the script works at the moment is that each building hotspot is centered in the middle of the screen (horizontally) which is fine but I need the gaps that are in the cityscape background to also line up in the center of the screen too where each building hotspot will be placed, so how do I go about doing this?

    Also the distance between each building hotspot are not equal widths apart.

    If you see here, this is what I need it to work like but using the script in the fiddle.

    Hope this makes sense

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •