Question

所以我的投资组合网站遇到了一个小问题（你可以在here看到它）

当您点击投资组合时，顶部会打开以显示详细信息（标题，年份，角色，描述）以及照片。我能够让每个项目替换所有文本数据，但我似乎无法将图像加载到缩略图中。

我能够在网站上的所有图片中找到我要查找的最后一张图片，但不会显示每个项目的每张照片。

以下是我正在使用的HTML：

<section id="details">
    <div class="pagewrapper">
        <section id="main-img">
            <article id="big-img">
                <img src="" alt="big-img" />
            </article>



            <article class="small-img-container">
                <a href="#"><img src="#" alt="smallimg" class="small-img" /></a>
            </article>
        </section>

        <section id="description">
            <h3></h3>
            <h4></h4>
            <h5></h5>
            <p></p>
        </section>
    </div>

    <div class="clear"></div>

    </section>



    <section id="portfolio">
        <div class="pagewrapper">
            <h2 class="sectionTitle">Portfolio</h2>

            <div class="thumb">
                <a class="small" href="#" title="David Lockwood Music" data-year="2010" data-role="Sole Wordpress Developer" data-description="David Lockwood is a musician and an educator based in New Hampshire who came to me needing a website for his musical career. I fully developed his site using Wordpress as a CMS, creating a custom template based on the design by Jeremiah Louf. Jeremiah and I worked together on the website's UX design."><img src="images_original/davidcover.png" alt="thumb" />

                    <div class="hide">                      
                        <a href="images/davidlockwood/homepage.png" ></a>
                        <a href="images/davidlockwood/blog.png"></a>
                        <a href="images/davidlockwood/shows.png"></a>
                        <a href="images/davidlockwood/bio.png"></a>
                        <a href="images/davidlockwood/photos.png"></a>

                    </div>

                    <h3>David Lockwood Music</h3>
                    <div class="clear"></div>
                </a>
            </div><!--thumb-->

，这是jQuery：

$(document).ready(function(){

    var proj = {};

    $('.thumb a').click(function() {
        $('#details').slideDown(1000);



        $('.hide a').each(function() {
            proj.img = $(this).attr("href");
            $('.small-img-container img').attr('src',proj.img);

        });

        alert("the image is " + proj.img);//is it getting the image URLS?
        proj.title = $(this).attr("title");
        proj.year = $(this).attr("data-year");
        proj.role = $(this).attr("data-role");
        proj.description = $(this).attr("data-description");



        $('#description h3').text(proj.title);
        $('#description h4').text(proj.year);
        $('#description h5').text(proj.role);
        $('#description p').text(proj.description);

    });

});

任何人都知道如何抓取特定项目的图像，将它们全部显示为缩略图，然后点击这些缩略图以查看更大的图像？

谢谢！

Answer 1

$('.hide a').each(function() {
    proj.img = $(this).attr("href");
    $('.small-img-container img').attr('src',proj.img);

});

proj.img将始终获取最后一张图片的值，因为您遍历所有a标记

如果我理解正确，这就是你需要的：

$('.thumb a').click(function() {

    var imageSrc = $(this).find('img[alt="thumb"]').attr('src');

    $('#big-img > img').attr({ src: imageSrc });

    var $thumbs = $(this).next('div.hide').find('img');

    $.each($thumbs, function(i, img){

        var $thumb = $(img)
            .click(function(){
                 $('#big-img > img').attr({ src: $(img).attr('src') });
             })
             .appendTo('#small-img-container');            


    });

});

Answer 2

所以，我重写了一切，但我认为这会让事情变得更容易。

使用数据属性，并从那里开始构建所有内容。我的解决方案要求您使用缩小后的图像（通过CSS），您可以在点击后完整显示。

Fiddle

jQuery的：

$("div#links > a").click(function(e) {
    var ID = $(this).data("content");
    var price = $(this).data("price");
    var descr = $(this).data("description");
    var rating = $(this).data("rating");

    $("div#images > img").hide();
    $("span#price, span#description, span#rating").text("").hide();

    $("div#images").children("img#" + ID).fadeToggle("slow");
    $("div#text span#price").text(price);
    $("div#text span#description").text(descr);
    $("div#text span#rating").text(rating);
    $("span#price, span#description, span#rating").fadeIn("fast");
    $("div#text").fadeIn("fast");

    e.preventDefault();
});

$("div#images > img").click(function() {
    $(this).toggleClass("active");
    var marginL = -$(this).width() / 2;
    $("div#images > img.active").css("margin-left", marginL);
    $("div#images > img:not(.active)").css("margin-left", "0px");

    if ($("div#overlay").is(":hidden")) {
        $("div#overlay").fadeIn("fast");
    }
    else {
        $("div#overlay").fadeOut("fast");
    }
});

抓住所有<a> tags in a specific div and displaying them</a>

2 个答案: