Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorwimmulder
    • CommentTimeSep 10th 2007
     permalink
    Hi everyone,

    I am working on a little website project for a family member of mine. I need to make a simple gallery for the site. Basically, a placeholder image with thumbnails. When you click on a thumbnail it replaces the placeholder. Also there is a paragraph for a description of the image. I just started using JQuery and pretty much Javascript in general, so I am not too familiar with the way to do this.

    What I have so far is that I can click a thumbnail and it updates the placeholder image. I cannot get the paragraph to update with the image description though. My markup is as follows:


    <ul id="thumbnails">
    <li><a href="bigimage.jpg?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"><img src="thumbnail.jpg" /></a><p>description for the image, to be displayed in description paragraph</p></li>
    </ul>

    <img id="bigImg" src="bigimage.jpg" />

    <p id="description">description of the image</p>




    My Javascript so far is as follows:

    $(document).ready(function() {
    $("#thumbnails > li > a").click(function() {
    $("#bigImg").attr({src: (this.href)});
    $("#description").text(this.parent().p.text);
    return false;
    });
    });


    As I said, the image updates, but the paragraph text doesn't update. Does anyone have an idea on how to fix this? Thank you very much for your help
    • CommentAuthork3liutZu
    • CommentTimeSep 13th 2007 edited
     permalink
    Try using the jQuery object $(this).

    And a little shorter :P


    $(function() {
    $("#thumbnails > li > a").click(function() {
    $("#bigImg").attr("src",$(this).attr(href)"});
    $("#description").text($(this).next().text());
    return false;
    });
    });
Add your comments
    Username Password
  • Format comments as (Help)