Всем привет!!!

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

Лучше конечно бы сделать так, чтобы большие картинки подгружались на страницу только при клике на свою миниатюру, не хотелось бы сразу грузить страницу с большими картинками.

<!--Контейнер в котором мы будем отображать большую картинку своей миниатюры-->
    <div id="big_img"></div>
     
    <!--Контейнер с миниатюрами-->
    <div class="in">
    <a href='big.jpg'><img src="small.jpg"></a> <a href='big1.jpg'><img src="small1.jpg"></a>
    </div>

Начало вроде придумал)) а дальше честно не знаю что делать...

<script>
$(document).ready(function() {	
     
    // При клике на миниатюру
    $('.in img').click(function()
    {

    });
});
</script>

Гугл не работает?

Либо так, но скорее всего не то..., т.к. картинка грузится сразу

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

<a href='big.jpg'><img src="small.jpg"></a>  

вот так вот можно

<a href='#' id='big_img_name' onClick='showImg(this);'><img src="small.jpg"></a>

Так же у тебя должен быть ОДИН "всплывающий" див, где будут отображаться полноразмерные картинки, который по умолчанию скрыт:

<div id='img_wraper' onClick='hideImg();'></div>

function showImg(element)
{
  var image_name = $(element).attr('id') + '.jpg';
   $('#img_wraper').html('<img src="http://mysite.com/images/' + image_name + '">');
   $('#img_wraper').show();
   return false;
}

function hideImg()
{
   $('#img_wraper').hide();
   return false;
}

При таком подходе, как раз и получится

Просто отличный вариант и как раз для нескольких картинок!!!

"Если же у тебя JQuery только для этого куска, то погугли, как менять на чистом яваскрипте свойства css, там пару строк, а 200кб сэкономишь " - немного не понял что вы имели ввиду.

segazav
Все эти примочки с $('#id').html(); облегчают жизнь, несомненo, но сама библиотека JQeury весит более 200 кбайт. Если ты ее используешь для множества целей, типа слайдеры, виджеты и т.д., тогда Ок. А если только, чтобы обратиться к элементу по его id, то зачем тебе лишнии 200кб на страницу грузить? нативным яваскриптом в пару строк, вместо

 $('#img_wraper').show() // + 200kb JQuery

var my_div = document.getElementById('img_wraper');
my_div.style.display = 'block';

Вот тут хорошо описано про это:
Поиск элементов в DOM

_____________
[продано копирайтерам]

Спасибо! Теперь понятно, что вы имели ввиду.

И ещё один нюанс: во время клика по следующей миниатюре появляется сначала содержимое тега Alt (видимо пока грузится большая картинка).
Как можно этого избежать или добавить какую нибудь анимацию загрузки?

Или может как то сделать, чтобы предыдущая большая картинка не исчезала, пока не загрузится следующая?

segazav
Ну ты этава.. таво.. сам немного погугли, чтоли
Вот тут этот вопрос разжован, с примерами. Как проверить загрузилось ли изображение в объект?

А вообще, раз уж пишешь на яваскрипт, то разберись в его природе. Как только поймешь, жить станет легче, нежели просто использовать набор команд.

Яваскрипт воспринимает все как объекты. Окно, документ, элемнт страницы.. все объекты. У каждого объекта есть свойства, которыми можно манипулировать, у каждого объекта есть события, на которые можно повесить свои функции.

Картинка - объект. Картинка загрузилась - это событие.
Значит тебе нужно найти это события (подсказка - load) и повесить на событие load для объекта картинка свою функцию, которая и будет показывать твой див-контейнер.

_____________
[продано копирайтерам]

ОК Спасибо вам огромное, Вы мне очень помогли!!!

Попробую сам разобраться с последним "нюансом"... Если уж сильно замучаюсь - напишу, может хоть ошибки поможете найти

P.S. Если честно просто нет времени глобально изучать JS, но так то хочется самому уметь его использовать всегда и везде.

А если нужен такой вариант: большая картинка первой миниатюры должна отображаться сразу после загрузки страницы, т.е. в блоке <div id='img_wraper' onClick='hideImg();'></div> как быть?

Так вроде работает (только не знаю правильно это или нет):

<div id='img_wraper'><img src="значение id='big_img_name первой миниатюры"></div>

segazav
ну раз работает, то все хорошо.
А на счет "а если такой вариант...", дело твое, как решишь, такой вариант и будет


_____________
[продано копирайтерам]

Ну просто странно как то, в теге <div> изначально прописана большая картинка и вдруг по клику её заменяет (именно заменяет, а не рядом отображается) другая картинка.

Эта вся конструкция будет работать во всех браузерах?

Получается что функция hideImg() и var my_div = document.getElementById('img_wraper'); вообще теперь не нужны?

Насчет веса jQuery зря циклитесь, все равно она почти у всех в кэше, можно просто с cdn подгружать, но я согласен что не всегда нужно пихать везде jQuery.