Обмен изображениями по клику внутри div - PullRequest
Новая
       50

Обмен изображениями по клику внутри div

0 голосов
/ 02 декабря 2011

Я хотел бы заменить изображения по щелчку, но также иметь замененное изображение щелчком мыши в лайтбокс.Вот мой пример, где первое изображение имеет лайтбокс: http://www.artdesigngroup.co/products/test.html

Я думаю, что мне нужно применить идентификатор «display» к окружающему div и заменить изображения в этом div.Но как мне сделать это и создать лайтбокс?

Спасибо.

1 Ответ

0 голосов
/ 03 декабря 2011

Я бы переосмыслил вашу структуру для обработки этого.Большая часть того, что вы делаете, может быть обработана с помощью простого jQuery вместо того, чтобы использовать собственные функции подкачки.Когда вы задаете свои вопросы, в том числе Fiddle - отличный способ получить ответ быстрее.Обратите внимание, что я использую здесь метод jQuery 1.7 prop, который вы должны использовать вместо attr.

http://jsfiddle.net/txbqX/3/

jQuery, чтобы получить то, что вы хотите 

//when main image is clicked, show it in colorbox
$('#foo a').colorbox();

//when thumb is clicked, set main image to it
$('div#thumbs img').click( function() {
    $('#foo a').prop('href', $(this).prop('src'));
    $('#foo img').prop('src', $(this).prop('src'));
    return false;  //stop link from navigating
})

Упрощенный HTML 

<div id="foo" > 
    <a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg">
        <img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display"  />
    </a>
</div>

<br />
<div id="thumbs">
    <img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" />
    <img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" />
    <img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" />
    <img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" />
    <img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" />
</div>
...