www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem with photoalbums, stuck

  1. #1
    Join Date
    Sep 2012
    Posts
    3

    Angry Problem with photoalbums, stuck

    Doing a website with a photoalbum and I'm using jquery and fancybox.

    It's mainly built from two different java-functions, one that handles the transition between albums and one that handles the fancybox-part. The problem is that when you change to next album and tries to open it, it still opens the first album.

    I've mady one separate fancybox-function for each album which are controlled by the class name. Whenever I switch album the classname of the fancybox-link is changed and it's dependant on the album ID. So to open album with ID 9 class named open_fancybox9 is called, for album 11 open_fancybox11 is called etc. When i run firebug the classname of the fancybox-link seems to be changing correctly but yet it always seems to call the function open_fancybox11 (the latest).

    I'm not getting any errors in firebug consol either

    the url is jnintensified.com
    (pass: tesTar)

    Code for opening the album (the first statement $(".fancybox").fancybox is for the other pics who doesnt open fancybox manually):
    Code:
    	<script type="text/javascript">
    		$(document).ready(function() {
    			$(".fancybox").fancybox({
    			scrolling   : 'no',
    			openEffect: 'elastic',
    			closeEffect: 'elastic',
    			nextEffect: 'fade',
    			prevEffect: 'fade',
    			mouseWheel: true,
    			autoPlay: false,
    			closeBtn: false,
    			openSpeed: 500,
    			nextSpeed: 500,
    				helpers	: {
    					title	: {
    						type: 'outside'
    					},
    					thumbs	: {
    						width	: 50,
    						height	: 50
    					}
    				}
    			});
    			<?
    			$query4="SELECT * FROM album WHERE view=1 ORDER BY AID DESC";
    			$kalla4=mysql_query($query4);
    			
    			while($row4 = mysql_fetch_assoc($kalla4)) {
    			echo "
    			$('.open_fancybox".$row4['AID']."').click(function() {
    			
    				$.fancybox.open([
    				";
    					$query3="SELECT * FROM album_photos WHERE fk_AID='".$row4['AID']."' ORDER BY PID;";
    					$kalla3=mysql_query($query3);
    					$first=1;
    					while($row3 = mysql_fetch_assoc($kalla3)){
    						if ($first==1) {
    							echo "
    							{
    								href : '".$row3['url']."',                
    								title : '".$row3['description']."'
    							";
    							$first=0;
    						} else {
    							echo "
    							},
    							{
    								href : '".$row3['url']."',                
    								title : '".$row3['description']."'
    							";
    						}
    					}
    				?>
    				}
    				], {
    					scrolling   : 'no',
    					openEffect: 'elastic',
    					closeEffect: 'elastic',
    					nextEffect: 'fade',
    					prevEffect: 'fade',
    					mouseWheel: true,
    					autoPlay: false,
    					closeBtn: false,
    					openSpeed: 500,
    					nextSpeed: 500,
    						helpers	: {
    							title	: {
    								type: 'outside'
    							},
    							thumbs	: {
    								width	: 50,
    								height	: 50
    							}
    						}
    				});
    				
    				return false;
    				
    			});
    			<?}?>
    		});
    	</script>
    	<script type="text/javascript">
    		$(document).ready(function(){
    			$('img.aa').hover(
    					function() {
    					$(this).stop().animate({"opacity": "0"}, "300");
    					},
    					function() {
    					$(this).stop().animate({"opacity": "1"}, "300");
    				});
    		});
    	</script>
    Code to change album (seems to work as intended):
    Code:
    	$query="SELECT * FROM album WHERE view=1 ORDER BY AID DESC";
    	$kalla=mysql_query($query);
    	$i=0;?>
    	<script type="text/javascript" language="javascript">
    	var descriptions = new Array()
    	var coverimages = new Array()
    	var images = new Array()
    	var AID = new Array()
    	<?
    	while($row = mysql_fetch_assoc($kalla)){
    		if ($row['view']==1){	
    			$q = mysql_query("SELECT * FROM album_photos WHERE fk_AID = '".$row['AID']."' ORDER BY fk_AID");
    			while ($p = mysql_fetch_assoc($q)){
    				if ($p['cover']==1){
    					echo 'descriptions['.$i.'] = "'.$p['description'].'";';
    					echo 'coverimages['.$i.'] = "'.$p['coverurl'].'";';
    					echo 'images['.$i.'] = "'.$p['url'].'";';
    					echo 'AID['.$i.'] = "'.$p['fk_AID'].'";';
    					$i++;
    				}
    			}
    		}
    	}
    	$i--;
    	echo '
    	var previous=0;
    	var next=0;
    	var current=0;
    	var min=0;
    	var max='.$i.';
    	var current=max;'; ?>
    	function previousImage() {
    		if (previous==min)
    			{
    				previous=max;
    			}
    		else
    			{
    				previous--;
    			}
    		if (next==min)
    			{
    				next=max;
    			}
    		else
    			{
    				next--;
    			}
    		$("#cover").fadeOut(function() {
    			//$(this).load(function() { $(this).fadeIn(); }); //<-- alternativt
    			document.getElementById("cover").src=coverimages[previous];
    			document.getElementById("coverlink").title=descriptions[previous];
    			document.getElementById("coverlink").href=images[previous];
    			document.getElementById("coverlink").rel=AID[previous];
    			$('#coverlink').removeClass('open_fancybox'+AID[current]);
    			$('#coverlink').addClass('open_fancybox'+AID[previous]);
    			$(this).fadeIn();
    		});
    		if (current==min)
    			{
    				current=max;
    			}
    		else
    			{
    				current--;
    			}
        }
    	function nextImage() {
    		if (previous==max)
    			{
    				previous=min;
    			}
    		else
    			{
    				previous++;
    			}
    		if (next==max)
    			{
    				next=min;
    			}
    		else
    			{
    				next++;
    			}
    		$("#cover").fadeOut(function() {
    			//$(this).load(function() { $(this).fadeIn(); }); //<-- alternativt
    			document.getElementById("cover").src=coverimages[next];
    			document.getElementById("coverlink").title=descriptions[next];
    			document.getElementById("coverlink").href=images[next];
    			document.getElementById("coverlink").rel=AID[next];
    			$('#coverlink').removeClass('open_fancybox'+AID[current]);
    			$('#coverlink').addClass('open_fancybox'+AID[next]);
    
    			$(this).fadeIn();
    		});
    		if (current==max)
    			{
    				current=min;
    			}
    		else
    			{
    				current++;
    			}
        }
    </script>
    Thanks for the help
    //Johan

    I'm not getting any errors in firebug consol either

    the url is jnintensified.com
    (pass: tesTar)

    Code for opening the album:

  2. #2
    Join Date
    Sep 2012
    Posts
    3
    Found myself writing abit too long, a short version:

    I have two different jquery clickfunctions one

    Code:
    $('.open_fancybox11').click(function() {...
    }
    
    and one 
    
    $('.open_fancybox9').click(function() {...
    }
    I'm changing an elements class from open_fancybox11 to open_fancybox9 with javascript but still after that the first function:

    Code:
    $('.open_fancybox11').click(function() {...
    }
    is opening when clicking the element.

  3. #3
    Join Date
    Sep 2012
    Posts
    3
    oops double post
    Last edited by Lotho; 09-05-2012 at 01:04 AM. Reason: doubleposted

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles