Показать определенное изображение при нажатии

Question

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

Во-первых у меня есть HTML-файл, который генерируется в PHP во время цикла:

<img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'> 

Тогда у меня есть CSS для DIV я хочу быть показан по щелчку предыдущего изображения:

#showimagediv { 
    display: none; 
    width: 500px; 
    height: 500px; 
    margin-left: 100px; 
    margin-top: -300px; 
    position: fixed; 
    background-color: #f00; 
    z-index: 6; 
} 

И последнее, что я есть Jquery код, который я пытался сделать:

<script> 
$(document).ready(function() { 
    $(\"#gallerythumbnail\").click(function(event) { 
     $(\".showimagediv\").show(); 
    }); 
}); 
</script> 

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

$(this).attr('src') 

Я не знаю, как использовать его в DIV, как показан, когда изображение щелкнуло

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

Answer 1

Получить исходный код из эскиза и создать новое изображение, которое будет вставлено в DIV, где» Повторяя попытку отображения щелчка изображения:

$(document).ready(function() { 
    $('.gallerythumbnail').on('click', function() { 
     var img = $('<img />', {src : this.src, 
           'class': 'fullImage' 
        }); 

     $('.showimagediv').html(img).show(); 
    }); 
}); 

Answer 2

Тогда у меня есть CSS для DIV я хочу быть показан по щелчку предыдущего изображения

, если это правильно, что вы сказали, предыдущих один есть образ, это означает, что DIV - это .next()!

использовать класс для DIV в вашем CSS:

.showimagediv { 

JQuery

$(function() { // DOM ready shorthand 

    $(".gallerythumbnail").click(function() { 
      $(this).next('.showimagediv').show(); // or you want .toggle() ? 
    }); 

}); 

Answer 3

Прежде всего, ваш код CSS #showimagediv. # обозначает атрибут идентификатора. Ваш код jQuery использует .showimagediv. . обозначает атрибут CLASS.

Итак, сначала вы должны решить, что showimagediv - это идентификатор или DIV, а не правильный CSS или ваш jQuery.

Than, поставьте свой тег img внутри, чтобы он стал «кликабельным». href = "#" означает, что ничего не произойдет, когда вы нажмете на него.

<a href="#" id="image"> 
    <img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'> 
</a> 

И измените вашу функцию jQuery на это (используйте div.showimagediv если это атрибут класса или DIV # showimagediv если это атрибут ID):

$(function() { 
    $("a#image").click(function() { 
     $("div.showimagediv").css("display", "block"); 
    }); 
}); 

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

Если вам нужно переключить вам нужно контролировать, что внутри функции JQuery, как это:

$(function() { 
    $("a#image").click(function() { 
     var actualDivDisplay = $("div.showimagediv").css("display"); 
     var newDivDisplay = ""; 

     if (actualDivDisplay == "none") { 
      newDivDisplay = "block"; 
     } else { 
      newDivDisplay = "none"; 
     } 

     $("div.showimagediv").css("display", newDivDisplay); 
    }); 
});