I have gallery.php that loads images with src path from a database.
I also have an external main.js that detects a click on a .thumbnail.
Everything works flawlessly until I load different images (another category of images, another set) via ajax. (the load() function of jquery) Everything shows just fine, but a problem with javascript appears.
After that, I can't retrieve the src attribute of my thumbnail. Here's what I mean.
BEFORE AJAX
Category 1 pictures/thumbnails
<a class="thumbnail"><img src="ressources/images/image1Small.jpg" /></a>';
<a class="thumbnail"><img src="ressources/images/image2Small.jpg" /></a>';
<a class="thumbnail"><img src="ressources/images/image3Small.jpg" /></a>';
And so on...
AFTER AJAX CALL
Category 2 pictures/thumbnails
<a class="thumbnail"><img src="ressources/images/image4Small.jpg" /></a>';
<a class="thumbnail"><img src="ressources/images/image5Small.jpg" /></a>';
<a class="thumbnail"><img src="ressources/images/image6Small.jpg" /></a>';
As you can see, everything is like before. The a tag has the same class as the old est of pictures. But when I call the function containing :
var path = $(this).children().attr("src");
It now returns : undefined instead of ressources/images/imageXSmall.jpg
I tried checking if $(this) returned something else after, but no success.
I was wondering if when an external .php file was loaded via jquery.load(), the link between those newly created <a class="thumbnail"> tags and main.js were lost. Like if I had to reload main.js after the jquery.load() function. Or something like that...
Thank you!
EDIT Here's the code:
-
When clicking on a link to different category
.linkSubCat being different categories$(".linkSubCat").click(function(){loadImages($(this).attr("id"));});
then
function loadImages(pCategory) {
switch (pCategory) {
case "subCat00":
$(".pics").load('loadImages.php',{category:0});
break;
case "subCat01":
$(".pics").load('loadImages.php',{category:1});
break;
case "subCat02":
$(".pics").load('loadImages.php',{category:2});
break;
case "subCat03":
$(".pics").load('loadImages.php',{category:3});
break;
default:
$(".pics").load('loadImages.php',{category:0});
break;
}
}
loadImages.php
<?php
$connection = mysql_connect("localhost","root", "") or die("Error Connecting : " . mysql_error());
if (!mysql_select_db("taktak")) die('Error connecting to database : ' . mysql_error());
function createThumbPHP() {
if(isset($_POST['category'])) {
if($_POST['category'] == 0){
$imageQuery = mysql_query("SELECT * FROM t_pictures WHERE p_category = 0");
$thumbHtml = '';
while ($tempImageQueryFetch = mysql_fetch_assoc($imageQuery)){
$thumbHtml .= '<a href="#" class="thumbnail"><img src="ressources/images/' . $tempImageQueryFetch["p_fileName"] . 'Small.jpg" /></a>';
}
}elseif($_POST['category'] == 1){
$imageQuery = mysql_query("SELECT * FROM t_pictures WHERE p_category = 1");
$thumbHtml = '';
while ($tempImageQueryFetch = mysql_fetch_assoc($imageQuery)){
$thumbHtml .= '<a href="#" class="thumbnail"><img src="ressources/images/' . $tempImageQueryFetch["p_fileName"] . 'Small.jpg" /></a>';
}
}elseif($_POST['category'] == 2){
$imageQuery = mysql_query("SELECT * FROM t_pictures WHERE p_category = 2");
$thumbHtml = '';
while ($tempImageQueryFetch = mysql_fetch_assoc($imageQuery)){
$thumbHtml .= '<a href="#" class="thumbnail"><img src="ressources/images/' . $tempImageQueryFetch["p_fileName"] . 'Small.jpg" /></a>';
}
}elseif($_POST['category'] == 3){
$imageQuery = mysql_query("SELECT * FROM t_pictures WHERE p_category = 3");
$thumbHtml = '';
while ($tempImageQueryFetch = mysql_fetch_assoc($imageQuery)){
$thumbHtml .= '<a href="#" class="thumbnail"><img src="ressources/images/' . $tempImageQueryFetch["p_fileName"] . 'Small.jpg" /></a>';
}
}
return $thumbHtml;
}
else {
$errorMSG = "Error Loading Images";
return $errorMSG;
}
}
echo createThumbPHP();
?>
So everything does what it's supposed to do. Here'sthe problem. This javascript code in main.js :
$(".thumbnail").click(
function(){
$('#imageBig img').remove();
var path = $(this).children().attr("src");
var newPath = path.substring(0, path.length-9);
var newPath2 = newPath += ".jpg";
var imageLoad = new Image();
$(imageLoad).load(function () {
if (--imageLoad == 0) {
// ALL DONE!
}
// anything in this function will execute after the image loads
$('#loader').hide();
var newImg = $('<img />').attr('src',$(this).attr('src'));
$('#imageBig').append( $(newImg) ); // I assume this is the code you wanted to execute
})
.attr('src',newPath2);
}
)
It removes the img in #imageBig, but doesn't seem to get the path of $(this).children().attr("src"); This script worked perfectly before I loaded different thumbnails (even with the same setup (classes, order, ...))
