Question

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());

    while($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

Answer 1

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.