Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    New to javascript

    Hello,
    I'm new to html and javascripting. And I'm trying to create a simple website and have 2 different javascripts running a one page and I can get either one to work but not both together. I'm hoping someone can help me out a little. Thanks!! These are both from templates that I found online and am trying to combine them.

    I'm not even sure where to start!

    this one does the js for the navigation links at the top of the page
    Code:
    <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.easing.min.js"></script>
      <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
      <script type="text/javascript" src="js/image_fade.js"></script>
        <script type="text/javascript">
        $(function() {
          $("#lava_menu").lavaLamp({
            fx: "backout",
            speed: 700
          });
        });
      </script>
    and this one does the photo gallery that I am trying to use
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    		<script type="text/javascript">
    
                $(function() {
    				/**
    				* navR,navL are flags for controlling the albums navigation
    				* first gives us the position of the album on the left
    				* positions are the left positions for each of the 5 albums displayed at a time
    				*/
                    var navR,navL	= false;
    				var first		= 1;
    				var positions 	= {
    					'0'		: 0,
    					'1' 	: 170,
    					'2' 	: 340,
    					'3' 	: 510,
    					'4' 	: 680
    				}
    				var $ps_albums 		= $('#ps_albums');
    				/**
    				* number of albums available
    				*/
    				var elems			= $ps_albums.children().length;
    				var $ps_slider		= $('#ps_slider');
    				
    				/**
    				* let's position all the albums on the right side of the window
    				*/
    				var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
    				$ps_albums.children('div').css('left',hiddenRight + 'px');
    				
    				/**
    				* move the first 5 albums to the viewport
    				*/
    				$ps_albums.children('div:lt(5)').each(
    					function(i){
    						var $elem = $(this);
    						$elem.animate({'left': positions[i] + 'px','opacity':1},800,function(){
    							if(elems > 5)
    								enableNavRight();
    						});
    					}
    				);
    				
    				
    				
    				/**
    				* next album
    				*/
    				$ps_slider.find('.next').bind('click',function(){
    					if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
    					disableNavRight();
    					disableNavLeft();
    					moveRight();
    				});
    				
    				/**
    				* we move the first album (the one on the left) to the left side of the window
    				* the next 4 albums slide one position, and finally the next one in the list
    				* slides in, to fill the space of the first one
    				*/
    				function moveRight () {
    					var hiddenLeft 	= $ps_albums.offset().left + 163;
    					
    					var cnt = 0;
    					$ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
    							var $this = $(this);
    							$ps_albums.children('div').slice(first,parseInt(first+4)).each(
    								function(i){
    									var $elem = $(this);
    									$elem.animate({'left': positions[i] + 'px'},800,function(){
    										++cnt;
    										if(cnt == 4){
    											$ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
    												//$this.hide();
    												++first;
    												if(parseInt(first + 4) < elems)
    													enableNavRight();
    												enableNavLeft();
    											});
    										}		
    									});
    								}
    							);		
    					});
    				}
    				
    				/**
    				* previous album
    				*/
    				$ps_slider.find('.prev').bind('click',function(){
    					if(first==1  || !navL) return;
    					disableNavRight();
    					disableNavLeft();
    					moveLeft();
    				});
    				
    				/**
    				* we move the last album (the one on the right) to the right side of the window
    				* the previous 4 albums slide one position, and finally the previous one in the list
    				* slides in, to fill the space of the last one
    				*/
    				function moveLeft () {
    					var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
    				
    					var cnt = 0;
    					var last= first+4;
    					$ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
    							var $this = $(this);
    							$ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(
    								function(i){
    									var $elem = $(this);
    									$elem.animate({'left': positions[i+1] + 'px'},800,function(){
    										++cnt;
    										if(cnt == 4){
    											$ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
    												//$this.hide();
    												--first;
    												enableNavRight();
    												if(first > 1)
    													enableNavLeft();
    											});
    										}										
    									});
    								}
    							);
    					});
    				}
    				
    				/**
    				* disable or enable albums navigation
    				*/
    				function disableNavRight () {
    					navR = false;
    					$ps_slider.find('.next').addClass('disabled');
    				}
    				function disableNavLeft () {
    					navL = false;
    					$ps_slider.find('.prev').addClass('disabled');
    				}
    				function enableNavRight () {
    					navR = true;
    					$ps_slider.find('.next').removeClass('disabled');
    				}
    				function enableNavLeft () {
    					navL = true;
    					$ps_slider.find('.prev').removeClass('disabled');
    				}		
    				
    				var $ps_container 	= $('#ps_container');
    				var $ps_overlay 	= $('#ps_overlay');
    				var $ps_close		= $('#ps_close');
    				/**
    				* when we click on an album,
    				* we load with AJAX the list of pictures for that album.
    				* we randomly rotate them except the last one, which is
    				* the one the User sees first. We also resize and center each image.
    				*/
    				$ps_albums.children('div').bind('click',function(){
    					var $elem = $(this);
    					var album_name 	= 'album' + parseInt($elem.index() + 1);
    					var $loading 	= $('<div />',{className:'loading'});
    					$elem.append($loading);
    					$ps_container.find('img').remove();
    					$.get('photostack.php', {album_name:album_name} , function(data) {
    						var items_count	= data.length;
    						for(var i = 0; i < items_count; ++i){
    							var item_source = data[i];
    							var cnt 		= 0;
    							$('<img />').load(function(){
    								var $image = $(this);
    								++cnt;
    								resizeCenterImage($image);
    								$ps_container.append($image);
    								var r		= Math.floor(Math.random()*41)-20;
    								if(cnt < items_count){
    									$image.css({
    										'-moz-transform'	:'rotate('+r+'deg)',
    										'-webkit-transform'	:'rotate('+r+'deg)',
    										'transform'			:'rotate('+r+'deg)'
    									});
    								}
    								if(cnt == items_count){
    									$loading.remove();
    									$ps_container.show();
    									$ps_close.show();
    									$ps_overlay.show();
    								}
    							}).attr('src',item_source);
    						}
    					},'json');
    				});
    				
    				/**
    				* when hovering each one of the images, 
    				* we show the button to navigate through them
    				*/
    				$ps_container.live('mouseenter',function(){
    					$('#ps_next_photo').show();
    				}).live('mouseleave',function(){
    					$('#ps_next_photo').hide();
    				});
    				
    				/**
    				* navigate through the images: 
    				* the last one (the visible one) becomes the first one.
    				* we also rotate 0 degrees the new visible picture 
    				*/
    				$('#ps_next_photo').bind('click',function(){
    					var $current 	= $ps_container.find('img:last');
    					var r			= Math.floor(Math.random()*41)-20;
    					
    					var currentPositions = {
    						marginLeft	: $current.css('margin-left'),
    						marginTop	: $current.css('margin-top')
    					}
    					var $new_current = $current.prev();
    					
    					$current.animate({
    						'marginLeft':'250px',
    						'marginTop':'-385px'
    					},250,function(){
    						$(this).insertBefore($ps_container.find('img:first'))
    							   .css({
    									'-moz-transform'	:'rotate('+r+'deg)',
    									'-webkit-transform'	:'rotate('+r+'deg)',
    									'transform'			:'rotate('+r+'deg)'
    								})
    							   .animate({
    									'marginLeft':currentPositions.marginLeft,
    									'marginTop'	:currentPositions.marginTop
    									},250,function(){
    										$new_current.css({
    											'-moz-transform'	:'rotate(0deg)',
    											'-webkit-transform'	:'rotate(0deg)',
    											'transform'			:'rotate(0deg)'
    										});
    							   });
    					});
    				});
    				
    				/**
    				* close the images view, and go back to albums
    				*/
    				$('#ps_close').bind('click',function(){
    					$ps_container.hide();
    					$ps_close.hide();
    					$ps_overlay.fadeOut(400);
    				});
    				
    				/**
    				* resize and center the images
    				*/
    				function resizeCenterImage($image){
    					var theImage 	= new Image();
    					theImage.src 	= $image.attr("src");
    					var imgwidth 	= theImage.width;
    					var imgheight 	= theImage.height;
    					
    					var containerwidth  = 460;
    					var containerheight = 330;
    					
    					if(imgwidth	> containerwidth){
    						var newwidth = containerwidth;
    						var ratio = imgwidth / containerwidth;
    						var newheight = imgheight / ratio;
    						if(newheight > containerheight){
    							var newnewheight = containerheight;
    							var newratio = newheight/containerheight;
    							var newnewwidth =newwidth/newratio;
    							theImage.width = newnewwidth;
    							theImage.height= newnewheight;
    						}
    						else{
    							theImage.width = newwidth;
    							theImage.height= newheight;
    						}
    					}
    					else if(imgheight > containerheight){
    						var newheight = containerheight;
    						var ratio = imgheight / containerheight;
    						var newwidth = imgwidth / ratio;
    						if(newwidth > containerwidth){
    							var newnewwidth = containerwidth;
    							var newratio = newwidth/containerwidth;
    							var newnewheight =newheight/newratio;
    							theImage.height = newnewheight;
    							theImage.width= newnewwidth;
    						}
    						else{
    							theImage.width = newwidth;
    							theImage.height= newheight;
    						}
    					}
    					$image.css({
    						'width'			:theImage.width,
    						'height'		:theImage.height,
    						'margin-top'	:-(theImage.height/2)-10+'px',
    						'margin-left'	:-(theImage.width/2)-10+'px'	
    					});
    				}
    				
                });
            </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    This is a question which has been asked (and answered) many times before.

    There are two reasons why multiple scripts in the same page will not work together.

    a) duplicate global variable and/or function names (including loop counters etc.)
    b) multiple onload statements.

    It is hard to identify your specific problem. Note that two different Javascsript frameworks (e.g. jQuery and Mootools) will often cause clashes which cannot be resolved.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-15-2012 at 05:49 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think the are both using jquery. And I can't find any duplicate variable names and no onloads.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    If both snippets are taken directly from your page, you are loading jQuery twice.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    they are both taken from the same page. And I thought it might be something about that, but I'm not sure how to fix it. Any idea's?

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    they are both jQuery, but different versions... have you tried loading only one of the jQuery's? (and then maybe try loading only the other)
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I can comment one out and the other one will work then. I just can't get them to both work together.

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    you commented out what? the jQuery loader? or the script?
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #9
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    When I do this
    Code:
    <!-- <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.easing.min.js"></script>
      <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
      <script type="text/javascript" src="js/image_fade.js"></script>
        <script type="text/javascript">
        $(function() {
          $("#lava_menu").lavaLamp({
            fx: "backout",
            speed: 700
          });
        });
      </script>
    -->
    The other one works

  • #10
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    maybe try this
    Code:
    <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.easing.min.js"></script>
      <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
      <script type="text/javascript" src="js/image_fade.js"></script>
        <script type="text/javascript">
        $(function() {
          $("#lava_menu").lavaLamp({
            fx: "backout",
            speed: 700
          });
        });
      </script>
    		<script type="text/javascript">
    
                $(function() {
    				/**
    				* navR,navL are flags for controlling the albums navigation
    				* first gives us the position of the album on the left
    				* positions are the left positions for each of the 5 albums displayed at a time
    				*/
                    var navR,navL	= false;
    				var first		= 1;
    				var positions 	= {
    					'0'		: 0,
    					'1' 	: 170,
    					'2' 	: 340,
    					'3' 	: 510,
    					'4' 	: 680
    				}
    				var $ps_albums 		= $('#ps_albums');
    				/**
    				* number of albums available
    				*/
    				var elems			= $ps_albums.children().length;
    				var $ps_slider		= $('#ps_slider');
    				
    				/**
    				* let's position all the albums on the right side of the window
    				*/
    				var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
    				$ps_albums.children('div').css('left',hiddenRight + 'px');
    				
    				/**
    				* move the first 5 albums to the viewport
    				*/
    				$ps_albums.children('div:lt(5)').each(
    					function(i){
    						var $elem = $(this);
    						$elem.animate({'left': positions[i] + 'px','opacity':1},800,function(){
    							if(elems > 5)
    								enableNavRight();
    						});
    					}
    				);
    				
    				
    				
    				/**
    				* next album
    				*/
    				$ps_slider.find('.next').bind('click',function(){
    					if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
    					disableNavRight();
    					disableNavLeft();
    					moveRight();
    				});
    				
    				/**
    				* we move the first album (the one on the left) to the left side of the window
    				* the next 4 albums slide one position, and finally the next one in the list
    				* slides in, to fill the space of the first one
    				*/
    				function moveRight () {
    					var hiddenLeft 	= $ps_albums.offset().left + 163;
    					
    					var cnt = 0;
    					$ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
    							var $this = $(this);
    							$ps_albums.children('div').slice(first,parseInt(first+4)).each(
    								function(i){
    									var $elem = $(this);
    									$elem.animate({'left': positions[i] + 'px'},800,function(){
    										++cnt;
    										if(cnt == 4){
    											$ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
    												//$this.hide();
    												++first;
    												if(parseInt(first + 4) < elems)
    													enableNavRight();
    												enableNavLeft();
    											});
    										}		
    									});
    								}
    							);		
    					});
    				}
    				
    				/**
    				* previous album
    				*/
    				$ps_slider.find('.prev').bind('click',function(){
    					if(first==1  || !navL) return;
    					disableNavRight();
    					disableNavLeft();
    					moveLeft();
    				});
    				
    				/**
    				* we move the last album (the one on the right) to the right side of the window
    				* the previous 4 albums slide one position, and finally the previous one in the list
    				* slides in, to fill the space of the last one
    				*/
    				function moveLeft () {
    					var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
    				
    					var cnt = 0;
    					var last= first+4;
    					$ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
    							var $this = $(this);
    							$ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(
    								function(i){
    									var $elem = $(this);
    									$elem.animate({'left': positions[i+1] + 'px'},800,function(){
    										++cnt;
    										if(cnt == 4){
    											$ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
    												//$this.hide();
    												--first;
    												enableNavRight();
    												if(first > 1)
    													enableNavLeft();
    											});
    										}										
    									});
    								}
    							);
    					});
    				}
    				
    				/**
    				* disable or enable albums navigation
    				*/
    				function disableNavRight () {
    					navR = false;
    					$ps_slider.find('.next').addClass('disabled');
    				}
    				function disableNavLeft () {
    					navL = false;
    					$ps_slider.find('.prev').addClass('disabled');
    				}
    				function enableNavRight () {
    					navR = true;
    					$ps_slider.find('.next').removeClass('disabled');
    				}
    				function enableNavLeft () {
    					navL = true;
    					$ps_slider.find('.prev').removeClass('disabled');
    				}		
    				
    				var $ps_container 	= $('#ps_container');
    				var $ps_overlay 	= $('#ps_overlay');
    				var $ps_close		= $('#ps_close');
    				/**
    				* when we click on an album,
    				* we load with AJAX the list of pictures for that album.
    				* we randomly rotate them except the last one, which is
    				* the one the User sees first. We also resize and center each image.
    				*/
    				$ps_albums.children('div').bind('click',function(){
    					var $elem = $(this);
    					var album_name 	= 'album' + parseInt($elem.index() + 1);
    					var $loading 	= $('<div />',{className:'loading'});
    					$elem.append($loading);
    					$ps_container.find('img').remove();
    					$.get('photostack.php', {album_name:album_name} , function(data) {
    						var items_count	= data.length;
    						for(var i = 0; i < items_count; ++i){
    							var item_source = data[i];
    							var cnt 		= 0;
    							$('<img />').load(function(){
    								var $image = $(this);
    								++cnt;
    								resizeCenterImage($image);
    								$ps_container.append($image);
    								var r		= Math.floor(Math.random()*41)-20;
    								if(cnt < items_count){
    									$image.css({
    										'-moz-transform'	:'rotate('+r+'deg)',
    										'-webkit-transform'	:'rotate('+r+'deg)',
    										'transform'			:'rotate('+r+'deg)'
    									});
    								}
    								if(cnt == items_count){
    									$loading.remove();
    									$ps_container.show();
    									$ps_close.show();
    									$ps_overlay.show();
    								}
    							}).attr('src',item_source);
    						}
    					},'json');
    				});
    				
    				/**
    				* when hovering each one of the images, 
    				* we show the button to navigate through them
    				*/
    				$ps_container.live('mouseenter',function(){
    					$('#ps_next_photo').show();
    				}).live('mouseleave',function(){
    					$('#ps_next_photo').hide();
    				});
    				
    				/**
    				* navigate through the images: 
    				* the last one (the visible one) becomes the first one.
    				* we also rotate 0 degrees the new visible picture 
    				*/
    				$('#ps_next_photo').bind('click',function(){
    					var $current 	= $ps_container.find('img:last');
    					var r			= Math.floor(Math.random()*41)-20;
    					
    					var currentPositions = {
    						marginLeft	: $current.css('margin-left'),
    						marginTop	: $current.css('margin-top')
    					}
    					var $new_current = $current.prev();
    					
    					$current.animate({
    						'marginLeft':'250px',
    						'marginTop':'-385px'
    					},250,function(){
    						$(this).insertBefore($ps_container.find('img:first'))
    							   .css({
    									'-moz-transform'	:'rotate('+r+'deg)',
    									'-webkit-transform'	:'rotate('+r+'deg)',
    									'transform'			:'rotate('+r+'deg)'
    								})
    							   .animate({
    									'marginLeft':currentPositions.marginLeft,
    									'marginTop'	:currentPositions.marginTop
    									},250,function(){
    										$new_current.css({
    											'-moz-transform'	:'rotate(0deg)',
    											'-webkit-transform'	:'rotate(0deg)',
    											'transform'			:'rotate(0deg)'
    										});
    							   });
    					});
    				});
    				
    				/**
    				* close the images view, and go back to albums
    				*/
    				$('#ps_close').bind('click',function(){
    					$ps_container.hide();
    					$ps_close.hide();
    					$ps_overlay.fadeOut(400);
    				});
    				
    				/**
    				* resize and center the images
    				*/
    				function resizeCenterImage($image){
    					var theImage 	= new Image();
    					theImage.src 	= $image.attr("src");
    					var imgwidth 	= theImage.width;
    					var imgheight 	= theImage.height;
    					
    					var containerwidth  = 460;
    					var containerheight = 330;
    					
    					if(imgwidth	> containerwidth){
    						var newwidth = containerwidth;
    						var ratio = imgwidth / containerwidth;
    						var newheight = imgheight / ratio;
    						if(newheight > containerheight){
    							var newnewheight = containerheight;
    							var newratio = newheight/containerheight;
    							var newnewwidth =newwidth/newratio;
    							theImage.width = newnewwidth;
    							theImage.height= newnewheight;
    						}
    						else{
    							theImage.width = newwidth;
    							theImage.height= newheight;
    						}
    					}
    					else if(imgheight > containerheight){
    						var newheight = containerheight;
    						var ratio = imgheight / containerheight;
    						var newwidth = imgwidth / ratio;
    						if(newwidth > containerwidth){
    							var newnewwidth = containerwidth;
    							var newratio = newwidth/containerwidth;
    							var newnewheight =newheight/newratio;
    							theImage.height = newnewheight;
    							theImage.width= newnewwidth;
    						}
    						else{
    							theImage.width = newwidth;
    							theImage.height= newheight;
    						}
    					}
    					$image.css({
    						'width'			:theImage.width,
    						'height'		:theImage.height,
    						'margin-top'	:-(theImage.height/2)-10+'px',
    						'margin-left'	:-(theImage.width/2)-10+'px'	
    					});
    				}
    				
                });
            </script>
    and then try this
    Code:
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>-->
      <script type="text/javascript" src="js/jquery.easing.min.js"></script>
      <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
      <script type="text/javascript" src="js/image_fade.js"></script>
        <script type="text/javascript">
        $(function() {
          $("#lava_menu").lavaLamp({
            fx: "backout",
            speed: 700
          });
        });
      </script>
    		<script type="text/javascript">
    
                $(function() {
    				/**
    				* navR,navL are flags for controlling the albums navigation
    				* first gives us the position of the album on the left
    				* positions are the left positions for each of the 5 albums displayed at a time
    				*/
                    var navR,navL	= false;
    				var first		= 1;
    				var positions 	= {
    					'0'		: 0,
    					'1' 	: 170,
    					'2' 	: 340,
    					'3' 	: 510,
    					'4' 	: 680
    				}
    				var $ps_albums 		= $('#ps_albums');
    				/**
    				* number of albums available
    				*/
    				var elems			= $ps_albums.children().length;
    				var $ps_slider		= $('#ps_slider');
    				
    				/**
    				* let's position all the albums on the right side of the window
    				*/
    				var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
    				$ps_albums.children('div').css('left',hiddenRight + 'px');
    				
    				/**
    				* move the first 5 albums to the viewport
    				*/
    				$ps_albums.children('div:lt(5)').each(
    					function(i){
    						var $elem = $(this);
    						$elem.animate({'left': positions[i] + 'px','opacity':1},800,function(){
    							if(elems > 5)
    								enableNavRight();
    						});
    					}
    				);
    				
    				
    				
    				/**
    				* next album
    				*/
    				$ps_slider.find('.next').bind('click',function(){
    					if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
    					disableNavRight();
    					disableNavLeft();
    					moveRight();
    				});
    				
    				/**
    				* we move the first album (the one on the left) to the left side of the window
    				* the next 4 albums slide one position, and finally the next one in the list
    				* slides in, to fill the space of the first one
    				*/
    				function moveRight () {
    					var hiddenLeft 	= $ps_albums.offset().left + 163;
    					
    					var cnt = 0;
    					$ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
    							var $this = $(this);
    							$ps_albums.children('div').slice(first,parseInt(first+4)).each(
    								function(i){
    									var $elem = $(this);
    									$elem.animate({'left': positions[i] + 'px'},800,function(){
    										++cnt;
    										if(cnt == 4){
    											$ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
    												//$this.hide();
    												++first;
    												if(parseInt(first + 4) < elems)
    													enableNavRight();
    												enableNavLeft();
    											});
    										}		
    									});
    								}
    							);		
    					});
    				}
    				
    				/**
    				* previous album
    				*/
    				$ps_slider.find('.prev').bind('click',function(){
    					if(first==1  || !navL) return;
    					disableNavRight();
    					disableNavLeft();
    					moveLeft();
    				});
    				
    				/**
    				* we move the last album (the one on the right) to the right side of the window
    				* the previous 4 albums slide one position, and finally the previous one in the list
    				* slides in, to fill the space of the last one
    				*/
    				function moveLeft () {
    					var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
    				
    					var cnt = 0;
    					var last= first+4;
    					$ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
    							var $this = $(this);
    							$ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(
    								function(i){
    									var $elem = $(this);
    									$elem.animate({'left': positions[i+1] + 'px'},800,function(){
    										++cnt;
    										if(cnt == 4){
    											$ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
    												//$this.hide();
    												--first;
    												enableNavRight();
    												if(first > 1)
    													enableNavLeft();
    											});
    										}										
    									});
    								}
    							);
    					});
    				}
    				
    				/**
    				* disable or enable albums navigation
    				*/
    				function disableNavRight () {
    					navR = false;
    					$ps_slider.find('.next').addClass('disabled');
    				}
    				function disableNavLeft () {
    					navL = false;
    					$ps_slider.find('.prev').addClass('disabled');
    				}
    				function enableNavRight () {
    					navR = true;
    					$ps_slider.find('.next').removeClass('disabled');
    				}
    				function enableNavLeft () {
    					navL = true;
    					$ps_slider.find('.prev').removeClass('disabled');
    				}		
    				
    				var $ps_container 	= $('#ps_container');
    				var $ps_overlay 	= $('#ps_overlay');
    				var $ps_close		= $('#ps_close');
    				/**
    				* when we click on an album,
    				* we load with AJAX the list of pictures for that album.
    				* we randomly rotate them except the last one, which is
    				* the one the User sees first. We also resize and center each image.
    				*/
    				$ps_albums.children('div').bind('click',function(){
    					var $elem = $(this);
    					var album_name 	= 'album' + parseInt($elem.index() + 1);
    					var $loading 	= $('<div />',{className:'loading'});
    					$elem.append($loading);
    					$ps_container.find('img').remove();
    					$.get('photostack.php', {album_name:album_name} , function(data) {
    						var items_count	= data.length;
    						for(var i = 0; i < items_count; ++i){
    							var item_source = data[i];
    							var cnt 		= 0;
    							$('<img />').load(function(){
    								var $image = $(this);
    								++cnt;
    								resizeCenterImage($image);
    								$ps_container.append($image);
    								var r		= Math.floor(Math.random()*41)-20;
    								if(cnt < items_count){
    									$image.css({
    										'-moz-transform'	:'rotate('+r+'deg)',
    										'-webkit-transform'	:'rotate('+r+'deg)',
    										'transform'			:'rotate('+r+'deg)'
    									});
    								}
    								if(cnt == items_count){
    									$loading.remove();
    									$ps_container.show();
    									$ps_close.show();
    									$ps_overlay.show();
    								}
    							}).attr('src',item_source);
    						}
    					},'json');
    				});
    				
    				/**
    				* when hovering each one of the images, 
    				* we show the button to navigate through them
    				*/
    				$ps_container.live('mouseenter',function(){
    					$('#ps_next_photo').show();
    				}).live('mouseleave',function(){
    					$('#ps_next_photo').hide();
    				});
    				
    				/**
    				* navigate through the images: 
    				* the last one (the visible one) becomes the first one.
    				* we also rotate 0 degrees the new visible picture 
    				*/
    				$('#ps_next_photo').bind('click',function(){
    					var $current 	= $ps_container.find('img:last');
    					var r			= Math.floor(Math.random()*41)-20;
    					
    					var currentPositions = {
    						marginLeft	: $current.css('margin-left'),
    						marginTop	: $current.css('margin-top')
    					}
    					var $new_current = $current.prev();
    					
    					$current.animate({
    						'marginLeft':'250px',
    						'marginTop':'-385px'
    					},250,function(){
    						$(this).insertBefore($ps_container.find('img:first'))
    							   .css({
    									'-moz-transform'	:'rotate('+r+'deg)',
    									'-webkit-transform'	:'rotate('+r+'deg)',
    									'transform'			:'rotate('+r+'deg)'
    								})
    							   .animate({
    									'marginLeft':currentPositions.marginLeft,
    									'marginTop'	:currentPositions.marginTop
    									},250,function(){
    										$new_current.css({
    											'-moz-transform'	:'rotate(0deg)',
    											'-webkit-transform'	:'rotate(0deg)',
    											'transform'			:'rotate(0deg)'
    										});
    							   });
    					});
    				});
    				
    				/**
    				* close the images view, and go back to albums
    				*/
    				$('#ps_close').bind('click',function(){
    					$ps_container.hide();
    					$ps_close.hide();
    					$ps_overlay.fadeOut(400);
    				});
    				
    				/**
    				* resize and center the images
    				*/
    				function resizeCenterImage($image){
    					var theImage 	= new Image();
    					theImage.src 	= $image.attr("src");
    					var imgwidth 	= theImage.width;
    					var imgheight 	= theImage.height;
    					
    					var containerwidth  = 460;
    					var containerheight = 330;
    					
    					if(imgwidth	> containerwidth){
    						var newwidth = containerwidth;
    						var ratio = imgwidth / containerwidth;
    						var newheight = imgheight / ratio;
    						if(newheight > containerheight){
    							var newnewheight = containerheight;
    							var newratio = newheight/containerheight;
    							var newnewwidth =newwidth/newratio;
    							theImage.width = newnewwidth;
    							theImage.height= newnewheight;
    						}
    						else{
    							theImage.width = newwidth;
    							theImage.height= newheight;
    						}
    					}
    					else if(imgheight > containerheight){
    						var newheight = containerheight;
    						var ratio = imgheight / containerheight;
    						var newwidth = imgwidth / ratio;
    						if(newwidth > containerwidth){
    							var newnewwidth = containerwidth;
    							var newratio = newwidth/containerwidth;
    							var newnewheight =newheight/newratio;
    							theImage.height = newnewheight;
    							theImage.width= newnewwidth;
    						}
    						else{
    							theImage.width = newwidth;
    							theImage.height= newheight;
    						}
    					}
    					$image.css({
    						'width'			:theImage.width,
    						'height'		:theImage.height,
    						'margin-top'	:-(theImage.height/2)-10+'px',
    						'margin-left'	:-(theImage.width/2)-10+'px'	
    					});
    				}
    				
                });
            </script>
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #11
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In both cases the photo gallery part (bottom jquery) worked but the navigation (top jquery) did not work

  • #12
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    ok... the top script should have at least worked in the second example...

    are you sure you have the script at the end of or after the body?
    maybe you need to register the functions with jQuery's ondocumentready
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • Users who have thanked blaze4218 for this post:

    rarment (06-15-2012)

  • #13
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wow did I completely miss that! I moved it to the bottom of the body and it worked. I feel dumb!! But thank you for your help!!!

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,454
    Thanks
    0
    Thanked 632 Times in 622 Posts
    Quote Originally Posted by rarment View Post
    wow did I completely miss that! I moved it to the bottom of the body and it worked. I feel dumb!! But thank you for your help!!!
    JavaScript should always be put immediately before the </body> tag.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #15
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Quote Originally Posted by felgall View Post
    JavaScript should always be put immediately before the </body> tag.
    I've always been taught it should be placed within the <head> tag? Could anyone expand on this? What are the pros/cons of putting it within the <body> tag as opposed to the <head>?
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: 25.15
    A very generous cashback site worth checking out.



  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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