Портфолио, чтобы показать

Question

Мне нравится иметь динамическое и простое в обновлении портфолио.

В одной части будет небольшой квадратный предварительный просмотр, а при наведении или щелчке по этому предварительному просмотру в разделе LARGE будет отображаться вся работа.

Я довольно хорошо знаю: MM_swapImage(), но люблю делать это в jquery или ajax.

Как я могу это сделать?

Некоторые результаты исследования: http://code.google.com/p/jquery-swapimage/

-

<SCRIPT LANGUAGE="Javascript">
function swap(pic1, pic2)
{
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var pic1src = pic1.src;
var pic2src = pic2.src;
pic2.src = pic1src;
pic1.src = pic2src;
}
</SCRIPT>

Answer 1

Вот мой код (просто пример, для работы вам нужны изменения)

$('#imageswitch img').hover(
                function () {
                    var oldsource = $(this).attr('src');
                    var foldername = oldsource.substr(0, oldsource.lastIndexOf('/'));
                    var filename = oldsource.replace(foldername+'/','');
                    var newsource = foldername + '/' + 'hover_' + filename;
                    $(this).attr('src', newsource);
                    $(this).data('src', oldsource);                   
                }, 
                function () {
                    $(this).attr('src', $(this).data('src'));
                }
            );

Создать папку для изображений. Маленькие изображения называются: image_1.jpg

большие изображения называются hover_image_1.jpg

(обратите внимание на 'hover_' перед именем файла)

Наведите указатель мыши на изображение, и оно заменит его источник на новый (большее изображение), когда вы оставляете изображение мышью, старый источник восстанавливается.

Answer 2

Быстрое и простое решение состоит в том, чтобы сохранить большее имя файла в теге rel и использовать его для замены источника большего изображения на странице. Вы можете расширить это с помощью эффектов постепенного появления и исчезновения, но здесь я приведу только основу:

<img class="thumbnail" rel="image01-hr.jpg" src="image01-thumb.jpg" />
<img class="thumbnail" rel="image02-hr.jpg" src="image02-thumb.jpg" />
<img class="preview" src="image01-hr.jpg" />

$(".thumbnail").click(function(e){
  $(".preview").attr("src", $(this).attr("rel"));
});