Размещение чего-либо над идентификатором с помощью jQuery

Question

Я создаю собственную галерею портфолио для своего сайта, и у меня возникла проблема.

Я хочу, чтобы галерея скользила вверх, когда вы нажимаете на миниатюру, но не сразу помещаете каждое изображение на страницу. Страница настроена примерно так:

  [  main img   ]
(hidden placeholder)
  [1][2][3][4][5]

И код должен работать так:

1. Нажмите на большой палец, чтобы получить SRC атрибут
2. Место <img src="original+_lg.jpg" /> над (hidden placeholder) (<div id="placeholder">)
3. Вычтите 500px из margin-top, чтобы увеличить изображение с помощью CSS3

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

Код, который у меня есть:

$(document).ready(function() {
$("#thumb").click(function() {
    $("#mask").css({
        "margin-top":"-500px"
    });
    $('img#placeholder').attr('src',function(i,e){
        return e.replace("slides/thumb_lg.jpg");
    })
});

}); * * тысяча двадцать-семь

Что, как вы видите, на самом деле не работает.

Я был довольно разочарован тем, что не смог понять это, потому что мне удалось на самом деле прилично кодировать jQuery для домашней страницы (http://beta.jacobbearce.com/)

Я бы очень признателен за помощь. Спасибо!

РЕДАКТИРОВАТЬ: небольшое уточнение:

Было бы здорово, чтобы этот сценарий получил атрибут SRC большого пальца, на который вы щелкнули, удалил последние четыре символа (чтобы избавиться от .jpg), а затем добавил _lg.jpg, чтобы отобразить правильное большое изображение. поместите новый <img src="original+_lg.jpg"> над div-заполнителем, а затем вычтите 500px из поля margin, чтобы он скользил вверх, чтобы показать новое изображение. Немного сложнее, я знаю, но это было бы лучше всего для того, что я пытаюсь сделать.

Answer 1

Вы можете использовать .before(), чтобы вставить новое изображение в DOM перед скрытым заполнителем:

$('#placeholder').before( '<img src="original+_lg.jpg" />' );

, затем отрегулируйте поля по мере необходимости.