2 Replies - 1556 Views - Last Post: 01 April 2013 - 09:11 PM

#1 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

cant access imgs added using ajax and php

Posted 25 February 2012 - 09:35 PM

I am working on a photo gallery for my sister in-law and she decided she wanted to have a selection box to select what folder to view in the gallery. Before this change I was accessing from one images folder and a thumb folder and my jquery animations and click events worked fine but now that I am adding photos from an ajax script and a php file I am not able to use the same code and they are in the same arrangement but I can not access the thumbs to change them using jquery.

What could be the problem here? is there a problem with my codes?

PHP Script to fetch photos
<?php
$dir = "../images/gallery/" . $_GET['folder'] . "/";

if ($dir!="images/gallery/null")
{
	if(is_dir($dir))
	{
		if ($dh = opendir($dir))
		{
			while(($fName = readdir($dh)) !== false){
				if ($fName !== "." && $fName !== "..")
				{
					echo "<img id='" . $fName ."' class='thumbs' src='images/gallery/" . $_GET['folder'] . "/" . $fName . "'/>" . "-";
					
				}
			}
			
			
			//close dirctory
			closedir($dh);
			
			
		}
		else
		{
			echo "Could not Show thumbs, Please contact help@meghdixon.com";
		}
	}
	else{echo "no directory";}
}
?>


Jquery to manipulate imgs
$(document).ready(function(){
//getting the large image src	
	var lrgImg = $("#lrgImg_main").attr("src", "images/gallery/1.png");
	
//when the mouse enters the thumb	
	$("#thumb_imgs img").mouseover(function(){
		
		var thumb_name = $(this).attr("id");
		$(this).animate({top: "-10px"}, 500);
		$(this).css("border", "1px purple solid");

	});
//when the mouse leaves the thumb	
	$("#thumb_imgs img").mouseleave(function(){
		$(this).animate({top: "0px"}, 500);
		$(this).css("border", "none");

	});
//When a Thumb is clicked event
	$("#thumb_imgs img").click(function(){
		
		var thumb_name = $(this).attr("id");
		$(this).animate({top: "10px"}, 500);
		
		$("#lrgImg_main").hide(0, function(){
			var largeSrc = 'images/gallery/' + thumb_name;
			
			$("#lrgImg_main").attr("src", largeSrc);
			$("#lrgImg_main").fadeIn(2000);
		});
		
	});
	
// hovering over left and right arrow
	$("#left_arrow, #right_arrow").hover(
		//over
		function(){
			$(this).css("background-color", "#cccccc");

		},
		//out	
		function(){
			$(this).css("background-color", "#dddddd");
		}
	);
	
//clicking left and right arrows
	$("#left_arrow").click(function(){
	//get large images current name
		var viewing_img_src = $("#lrgImg_main").attr("src");
		var lrg_img_split = viewing_img_src.split("/");
		var lrg_img_name = lrg_img_split[2];
	//get path to images
		var img_path = lrg_img_split[0]+"/"+lrg_img_split[1]+"/";
		
	//get img number
		var lrg_img_name_slice = lrg_img_name.split(".");
		var img_number = lrg_img_name_slice[0];
		img_number = parseInt(img_number);
		
		if (img_number > 1){
			//subtract one from img_number
			img_number -=1;
			$("#lrgImg_main").hide();
			$("#lrgImg_main").attr("src", img_path + img_number + ".png");
			$("#lrgImg_main").slideDown(2000);
			
			
		}
		
		
		
		//change image to prevous img if img is larger than number 1

	//	$("#lrgImg_main").attr("src", img_path + "01.png");
	});





//end of doc ready
});



PHP page that holds content (I plan to move the script with the ajax to an other file once it works correctly.)
<div id="content">
	<div id="select">
	Select a folder to view-
		<select id="folder">
			<option value="null">Select a folder</option>
			<option value="steinhardt">Steinhardt</option>
			<option value="seven_brides">Seven Brides</option>
			<option value="bull_fight">Bull Fight</option>
		</select>
	</div>
	<div id="gallery_wrapper" class="auto-style1">
		<div id="gallery_content">
			<div id="large_img">
				<div id="left_arrow">
					<img alt="left arrow" src="images/gallery/arrows/left_arrow.png"></div>
				<img id="lrgImg_main"alt="" src="">
				<div id="right_arrow">
					<img alt="right arrow" src="images/gallery/arrows/right_arrow.png"></div>
			</div>
			<div id="thumb_imgs">
				<script type="text/javascript">
					$("#folder").change(function(){
						var selection = $("#folder").val();
						
						//AJAX code
						var xmlhttp;
						if (window.XMLHttpRequest)
						  {// code for IE7+, Firefox, Chrome, Opera, Safari
						  xmlhttp=new XMLHttpRequest();
						  }
						else
						  {// code for IE6, IE5
						  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
						  }
						xmlhttp.onreadystatechange=function()
						  {
						  if (xmlhttp.readyState==4 && xmlhttp.status==200)
						    {
						    	//remove images from thumbs
						    	$("#thumb_imgs").empty();
						    	
						    	//write text to page from responce
								var response = xmlhttp.responseText;
								
								var fName = response.split("-");
								
								for(var i=0; i<fName.length; i++)
								{
									$("#thumb_imgs").append(fName[i] + " ");
								}
								
								var thumb_src_1 = document.getElementById("1.png").src;
								
								$("#lrgImg_main").attr("src", thumb_src_1);
								
								alert(fName[0]);
						    }
						  }
						xmlhttp.open("GET","templates/gallery_thumbs.inc.php?folder=" + selection,true);
						xmlhttp.send();

						
						
					});
				</script>
			</div>
		</div>
	</div>
</div>



Any direction or input will be greatly appreciated I am getting frustrated and don't want to make drastic changes before I understand what is going on.

Is This A Good Question/Topic? 0
  • +

Replies To: cant access imgs added using ajax and php

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 801
  • View blog
  • Posts: 1,700
  • Joined: 30-January 09

Re: cant access imgs added using ajax and php

Posted 25 February 2012 - 11:10 PM

Without looking at your code too intensely, I can see that there is a problem right at the beginning. Look at the following piece of code:
<?php
$dir = "../images/gallery/" . $_GET['folder'] . "/";

if ($dir!="images/gallery/null")
{


Given that the $dir variable starts with "../", then the if conditional will always fire. So, essentially your check for a null $_GET value is moot.

Now, if the problem you are having is that newly loaded images don't have any of the click or mouseover events, that would be because you aren't live binding them. Instead of this:
$("#thumb_imgs img").click(function(){...


...it is better to use this...
$("#thumb_imgs img").off('click').on('click', function(){...


The same goes for the other event handlers you hav attached, such as mouseover and mouseout.

The functions I have just shown you are the latest (and recommended) functions from jQuery. You may need to upgrade your jQuery library to the latest verion (1.7.1?) if you are hosting it at the local server (rather than accessing the Google API).
Was This Post Helpful? 2
  • +
  • -

#3 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 801
  • View blog
  • Posts: 1,700
  • Joined: 30-January 09

Re: cant access imgs added using ajax and php

Posted 01 April 2013 - 09:11 PM

One ore thing, if the images are added on the fly after the Javascript is loaded, then you'll need to change your event handlers to this:
$("#thumb_imgs").off('click', 'img').on('click', 'img', function(){...


That command adds the event handler to the #thumb_imgs element, but will apply to any descendant img elements no matter when they are created.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1