Получение большой картинки через onclick

[proWoke]

Получение большой картинки через onclick

В общем я не нашёл готового решения для своей галереи. Что нахожу, либо не совсем для меня подходит, либо не могу адаптировать нормально, либо она не рабочая.
Хочу сам делать. Что я имею:
Вот карусель взял такую http://flowplayer.org/tools/demos/scrollable/index.html
Её я поставил на сайт, теперь хочу, чтобы при клике на миникартинку выводился её большой брат в центр. На джавасрипт я написал такую вот функцию:
function show_img(src)
{

document.getElementbyId("big_img").src=src;

}
И вот в миникартинки я вставляю этот id вот так:

<div>
         <img  id="big_img" src="bigimg/1.jpg" 
	onclick="show_img();"/>
         <img id="big_img" src="bigimg/2.jpg" 
		onclick="show_img();" />
         <img id="big_img"  src="bigimg/3.jpg" 
                                  onclick="show_img();" />
         <img src="bigimg/4.jpg" />
         <img src="bigimg/5.jpg" />
      </div>

По моей логике, когда я щёлкаю на миникартинке, в функцию show_img передаётся ссылка и она должна выводить её в большом размере. В миникартинки вбиты сразу большие, только в уменьшенном виде с помощью css. Но у меня это не работает, вот хотел спросить правильно ли я делаю и почему не работает? Вроде всё логично по идеи.

 

[c0dex]

Делаешь не правильно. Верстка не валидная, id должны быть уникальные в DOM дереве.

В цикле выводишь мелкие картинки, которым в ссылку ставишь на событие онклик - показ большой картинки.

<a href='#' onclick='show_img_big("link to big img...")'><img src="/img/1.jpg" alt=""/></a>

Дальше просто делаешь через jquery (я бы сделал так)

$('#div').html('<img src="/xxx/yyy.jpg" alt=""/>');

 

[A1x]

я бы прикрутил теперь к карусели лайтбокс
например этот http://leandrovieira.com/projects/jquery/lightbox/

 

[c0dex]

Да, лайтбоксы вещь красивая, но не всегда то, что нужно. Что-то ТС пропал.

Вариант A1x весьма симпатичный, сам юзал его какой-то время, потом перешел на http://colorpowered.com/colorbox/

 

[proWoke]

Я тут, я админку пишу всё. Просто лайтбокс не подходит не под дизайн, не под задумку. А вёрстка не валидна из за отсутствия alt тегов? Я чуть попозже информацию от тебя переработаю. Спасибо за советы. Я просто ща хочу кое чё доделать, а потом вернуться к галереи.

 

[A1x]

да alt обязательно должны быть, хотя бы пустые. id должны быть уникальны

 

[c0dex]

Ну как, alt атрибуты не обязательны, если ты говнокодить хочешь. У опытных верстальщиков-стандартистов альты всегда указаны. Если есть желание могу кинуть сюда линки на статьи одного знакомого верстальщика.

 

[MildMildMint]

Ну как, alt атрибуты не обязательны, если ты говнокодить хочешь.

И каким боком отсутствие alt для всех img будет говнокодом?

Неужели w3c всем мозг выедает, что "код, не прошедший валидацию" == "говнокод"?

 

[c0dex]

MildMildMint
Если ты привык верстать не валидно и криво, это не значит, что все так должны делать. Я устал уже писать об этом, ибо каждую неделю тут появляется кто-то у кого что-то не пашет именно из-за незнаний верстки.

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

 

[proWoke]

Автор оригинала: c0dex
Делаешь не правильно. Верстка не валидная, id должны быть уникальные в DOM дереве.

В цикле выводишь мелкие картинки, которым в ссылку ставишь на событие онклик - показ большой картинки.

<a href='#' onclick='show_img_big("link to big img...")'><img src="/img/1.jpg" alt=""/></a>

Дальше просто делаешь через jquery (я бы сделал так)

$('#div').html('<img src="/xxx/yyy.jpg" alt=""/>');

Всё равно я что то не поня.
Вот у меня должна быть вот такой див:

     <div>
         <a href="#" onclick='show_img_big("bigimg/1.jpg")'><img src="miniimg/s1.jpg" alt="" /></a>
         <a href="#" onclick='show_img_big("bigimg/2.jpg")'><img src="miniimg/s2.jpg" alt="" /></a>
         <a href="#" onclick='show_img_big("bigimg/3.jpg")'><img src="miniimg/s3.jpg" alt="" /></a>
         <a href="#" onclick='show_img_big("bigimg/4.jpg")'><img src="miniimg/s4.jpg" alt="" /></a>
         <a href="#" onclick='show_img_big("bigimg/5.jpg")'><img src="miniimh/s5.jpg" alt="" /></a>
      </div>

У меня должна быть подключенна библиотека jquery в <script>? Да?
Потом я добавляю в <script>
$(function() {
$('#div').html('<img src="/xxx/yyy.jpg" alt=""/>');
});
</script>
Ну у меня это не работает. Но я что то всё равно не могу понять как будет это работать? Я так про jquery почитал, #div Это значит ищет элемент с id="div" .html значит ко всему, что находится между тегами хтмл. А вот потом чё? Я просто не совсем понял твой совет и не понимаю как это работать должно, я же id не выставил у миникартинок в блоке div.

 

[A1x]

ээ... $('#div') - это элемент с id="div"

 

[c0dex]

proWoke
Во первых:

конструкция вида $(function() ... будет исполняться при событии onload для DOM дерева, если я не прав - поправьте, я не помню точно как онлоад пишется.

Тебе надо написать:
function show_img_big(img_src){
$('#div_id').html('<img src="'+img_src+'" alt=""/>');
}

вот при этом все сработает так, что элементу с id="div_id" присвоится содержимое в виде картинки с адресом img_src

 

[proWoke]

Работает. Спасибо. Научусь кунг фу jquery за неделю. Javascript посложнее будет освоить за короткий срок. А jquery вроде не особо сложно.

 

[MildMildMint]

Если ты привык верстать не валидно и криво,

А ты будешь читать, то что я пишу, или привык придумывать?

Я говорил не про "невалидно и криво", а про "невалидно и качествено".

Я устал уже писать об этом, ибо каждую неделю тут появляется кто-то у кого что-то не пашет именно из-за незнаний верстки.

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

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

Альты нужны только там, где они нужны. Часть картинок их не требует.

Я за качественную верстку. Но валидность и качество никак не соотносятся.

 

[c0dex]

MildMildMint
Тогда уже будем оперировать нормальными понятиями и качество заменим на семантическую правильность верстки. Ибо валидность да, не показатель, ибо с точки зрения валидности, верстка может быть валидна, но быть говнокодом по причине неправильной семантики.

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

 

[MildMildMint]

и качество заменим на семантическую правильность верстки.

Давай лучше заменим на нормальное отображение у пользователя и на сео?

 

[c0dex]

ну это априори должно быть верно при всех соблюденных стандартах, отображение должно быть везде приблизительно одинаково)))) СЕО мне не уперлось)))

 

[MildMildMint]

ну это априори должно быть верно при всех соблюденных стандартах

Не согласен с выделенным.

Зачем нужно соблюдение стандартов? Точнее, для кого?

 

[c0dex]

MildMildMint
для браузеров, чтобы не было путаницы, давайте мы все будем писать как хочется, не соблюдая орфографию и пунктуацию, ага?

 

[MildMildMint]

c0dex нет, т.к. будут присутствовать негативные эффекты по отношению к людям.
Невалидная качественная верстка таких эффектов не несет.