I have a web page where I show a series of images brought from a database, these images when passing over shows you a "quick view" message (), clicking on this link shows you on the page a div with the largest image, I need when someone click on this link, in the div show me different images according to what I have clicked, this is my code
PHP/HTML CODE
if ($array->num_rows > 0) {
while($row = $array->fetch_assoc()) {
<div>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />'; ?>
<a href="#" class="js-show-modal1">
Quick View
</a>
</div>
}
}
JS CODE
$('.js-show-modal1').on('click',function(e){
e.preventDefault();
$('.js-modal1').addClass('show-modal1');
});
CSS
.show-modal1 {
visibility: visible;
opacity: 1;
}
HTML
<div class="js-modal1">
<img src="images/someimage.jpg">
</div>
this is what i need , when i click here : <a href="#" class="js-show-modal1"> Quick View </a>
Here shows this :
<div class="js-modal1">
<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />
</div>