0

私のポートフォリオサイトに小さな問題があります（ここで見ることができます）

ポートフォリオの一部をクリックすると、上部のセクションが開き、詳細 (タイトル、年、役割、説明) と写真が表示されます。各プロジェクトですべてのテキスト データを置き換えることができましたが、画像をサムネイルに読み込むことができないようです。

サイト上のすべての画像で探している最後の画像を取得できましたが、各プロジェクトの各写真を表示することはできません。

ここに私が取り組んでいる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);

    });

});

特定のプロジェクトの画像だけを取得し、それらをすべてサムネイルとして表示し、それらのサムネイルをクリックして大きな画像を表示する方法を知っている人はいますか?

ありがとう！

4

2 に答える 2

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

});

proj.imgaすべてのタグを繰り返し処理しているため、常に最後の画像の値を取得します

私があなたを正しく理解しているなら、これはあなたが必要とするものです：

$('.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');            


    });

});
于 2012-09-22T21:31:31.490 に答える
0

それで全部書き直しましたが、これでだいぶ楽になると思います。

データ属性を操作し、そこからすべてを構築します。私の解決策では、クリック後に完全に表示される（CSSを介して）縮小された画像を操作する必要があります。

フィドル。

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");
    }
});​
于 2012-09-22T22:13:06.303 に答える