I am creating a portfolio image gallery for my website but I'm having some trouble... When I click on one of the icons the first image goes away (thats suppose to happen) but the next image won't open...
Heres my code:
$(".portlink").click(function() {
$(".large-image").addClass("hidden");
var $alt = $(this).attr("alt");
$(".", $alt).removeClass("hidden");
})
And my html/php...
function portfolio() {
$sql = "SELECT * FROM db ORDER BY id DESC";
$res = mysql_query($sql) or die(mysql_error());
whi开发者_Python百科le($row = mysql_fetch_assoc($res)) {
?>
<div id="large-image" class="<?php echo $row['name'] ?> large-image hidden">
<a href="<?php echo $row['website_address'] ?>"><img src="img/uploads/<?php echo $row['website_image'] ?>" alt="" /></a>
</div>
<?php
}
} // End portfolio
function portfolio_nav() {
$sql = "SELECT * FROM db ORDER BY id DESC";
$res = mysql_query($sql) or die(mysql_error());
while($row = mysql_fetch_assoc($res)) {
?>
<div class="workbox">
<div class="background pngfix">
<a class="portlink" alt="<?php echo $row['name'] ?>" href="#"><img src="img/uploads/<?php echo $row['website_image'] ?>" alt="" /></a>
</div>
</div>
<?php
}
} // End portfolio
please help!!
Thanks Ben
Just as a side note, you shouldn't have multiple elements with the same id (all your divs have "large-image" as the id).
I think your jQuery should look like this:
$(".portlink").click(function() {
$(".large-image").addClass("hidden");
var alt = $(this).attr("alt");
$("." + alt).removeClass("hidden");
})
(used a '+' instead of ',' in last line).
If that doesn't work check that $row['name'] is a string as you expect.
Yeap, strictly speaking, each HTML element should ideally has a unique ID.
You can probably add a counter for the ID, so the name would be "large-image-1", "large-image-2", etc, and of course, passing the counter as well for the JavaScript/jQuery function.
Cheers.
精彩评论