Duplicate Image in Gallery

У меня есть галерея изображений, в которой отображаются все изображения встроенные, а целевое изображение отображается больше в другом месте на странице. Проблема, которую я хотел бы решить, - сделать целевой образ более крупным, не удаляя его из потока галереи.Duplicate Image in Gallery

<div class="gallery"> 
    <a href="#1"><img id="1" src="http://placehold.it/100" /></a> 
    <a href="#2"><img id="2" src="http://placehold.it/200" /></a> 
    <a href="#3"><img id="3" src="http://placehold.it/300" /></a> 
    <a href="#4"><img id="4" src="http://placehold.it/400" /></a> 
</div>

Fiddle: http://jsfiddle.net/GxxV5/

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

В идеале есть решение html/css? Я был бы в порядке с помощью javascript-решения, но, пожалуйста, не jquery. Я все еще изучаю javascript, прежде чем перейти к jquery.

источник

2013-07-23 Eric Wolf

Вот рабочий пример: http://jsfiddle.net/Stijntjhe/xxBEd/

Не так много JavaScript на всех, положить его в <head>:

function show(img) { 
    document.getElementById('big').innerHTML = '<img src="' + img.src + '" />'; 
}

И добавить простой onclick к изображениям:

<img id="2" onclick="show(this);" src="http://placehold.it/200" />

Не забудьте указать дополнительно <div> в своем HTML:

<div id="big"></div>

EDIT:

Это возможно даже без JavaScript, но вы должны были бы некоторые дополнительные HTML: http://jsfiddle.net/Stijntjhe/xxBEd/5/

источник

2013-07-23 01:42:49

Это почти работает, основными проблемами являются: 1. И новый элемент, и старый изменяют размер и 2. Новый элемент не находится в нижней части страницы (это не нужно/нужно/исправлять, в идеале изображения будут достаточно большими, чтобы заполнить пробел) –

Я только что изменил CSS, чтобы решить эти проблемы: http://jsfiddle.net/Stijntjhe/xxBEd/4/ –

Выглядит хорошо! Я пытаюсь понять, как по существу переместить css из img: target в следующий #big селектор. До сих пор я только скопировал с img: target в #big> img, но он не делает то, что я хочу ... –

Я просто добавить основной Javascript функции в вашей выборке, как:

function showMe(img, size) { 
    document.getElementById("content").src = img.src; 
    document.getElementById("content").style.width = size + "px"; 
    document.getElementById("content").style.height = size + "px"; 
}

Вы можете увидеть полное изменение на этом JSFiddle. Пожалуйста, помогите мне добавить некоторые css для beaufity it;;)

источник

2013-07-23 02:22:31

Duplicate Image in Gallery

ответ

Смежные вопросы