миниатюры в галерее изображений

-2

Пожалуйста, обратите внимание на my codepen:миниатюры в галерее изображений

HTML

<body> 
    <div class="thumbnails"> 
    <a href="#"><img src="http://s30.postimg.org/4yboplkxd/dotty.jpg" width="100" height="100"></a> 
    <a href="#"><img src="http://s9.postimg.org/4fg0tjk5r/goldy.jpg" width="100" height="100"></a> 
    <a href="#"><img src="http://s12.postimg.org/5lsgrnfcd/oily.jpg" width="100" height="100"></a> 
    <a href="#"><img src="http://s29.postimg.org/mcpamwhaf/splashy.jpg" width="100" height="100"></a> 
    </div> 

    <div class="large-image"><div> 
</body>

CSS

body { 
margin:0; 
padding:0; 
} 

.thumbnails { 
    width: 250px; 
    padding-top: 60px; 
    padding-left: 60px; 
    display: inline-block; 
} 

img { 
    margin: 2px;  
} 

img:hover { 
border: 1px solid black; 
}

То, что я в настоящее время составляет 4 чешуйки вниз изображений в DIV с class = "thumbnails".

Что я хочу достичь, когда я нажимаю на миниатюры, я хочу, чтобы изображение большего размера отображалось в div с классом = «большое изображение».

источник

2015-04-22 troy beckett

Я совершенно новой для этого веб-сайта и, возможно, я получаю это неправильно , Но каждый раз, когда я задаю вопрос, кто-то должен стонать, и я не могу писать еще несколько дней. Я не могу это понять, как это конструктивно или необходимо. Я не подвел вас к ответу. Что действительно меня заводит, так это то, что есть люди, которые более чем счастливы помочь мне, которые много научили меня советам, но другие без причины приходят и пытаются наказывать меня за задание вопроса. Попытайтесь понять, что не все талантливы, как вы, и то, что кажется глупым вопросом, действительно помогает другим: –

[@troy beckett] (http://stackoverflow.com/users/4730663/troy-beckett) Я думаю, что поданные голоса идут от того, что вы не ставите более важный код в свой вопрос и объясняете, где проблема. У меня есть проблема с тем, кто не имеет любезности, чтобы объяснить вам, почему они проголосовали за ваш вопрос. Всякая идея усилий немного отличается, поэтому ее следует объяснить. Как только вы редактируете, они могут удалить свой голос. [Используйте эту ссылку для получения хороших вопросов] (http://stackoverflow.com/help/how-to-ask). – talves

После включения библиотеки JQuery, добавьте следующий JS:

$("img").click(function() { 
    $("div.large-image").empty().append($(this).clone().css('width',1000)); 
})

Это добавляет слушатель событий для всех изображений, которые пожары, когда они щелкнули. Затем он удаляет все содержимое раздела .large-image и добавляет копию вашего элемента img.

источник

2015-04-22 11:08:40 Huey

Спасибо, много для вашего очень быстрого ответа, то, что ваш ответ делает, замечательно, но он полностью клонирует миниатюру. Я хочу разместить большую версию изображения в div большого изображения. Но спасибо за ваш ответ, это отличное начало для меня. –

Добавьте в ИМАГ тег только с источником изображения щелкнутыми изображения, как показано ниже:

$("img").click(function() { 
    $("div.large-image").empty().append(
     $("<img/>", { src: this.src }) 
    ); 
})

Demo @Pen

источник

2015-04-22 11:26:29 lshettyl

Могу я просто спросить совета, как вы думаете, что я могу улучшить свои навыки jquery и javascript. Вы, ребята, явно очень хороши, и мне хотелось бы получить гораздо больше. Поэтому мне было интересно, если бы вы все-таки посоветовали наклониться или просто практиковать. –

Прежде всего, я надеюсь, что мой ответ помог вам. Что касается изучения JS/jQuery, то это о многом читается (онлайн) и внедряет их на практике, когда вы сталкиваетесь с чем-то. Просто чтение не поможет. – lshettyl

, поэтому я ушел и попробовал добавить код так, чтобы каждый раз, когда нажимается эскиз, большое изображение имеет такой текст внизу, чтобы описать рис. heres мой текущий codepen [ссылка] (http://codepen.io/tbeckett24/pen/VLwmWy). Мне это нравится, но это не дает мне никакой свободы в том, чтобы разделять или манипулировать текстом, используемым в теге alt. Не могли бы вы предложить другой путь? Просто так мы поняли, что не ожидаю полных ответов, поскольку я знаю, что у вас есть лучшие дела с вашим временем. Просто ищите советы или руководство? –

миниатюры в галерее изображений

ответ

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