Develop Reference

only 1st img is display onclick of link for multiple modal

The images are fetched from the PHP PDO database from the directory "Images" where there are multiple images in it using SQL queries. When I try to click on the source link of the image and try to open the modal image, only the first image is been viewed by all other images too. I tried to change the ID names, but still it is showing the same first page. I have attached my code and the output below. Requesting anyone to help me in this and also the procedure to change the ID values.
if($data=$stmt->fetchAll(PDO::FETCH_ASSOC)) // to display all the images from the given condition
{
$link_id=0;
foreach($data as $row)
{
//$img=$row['images'];
$id=$row['id'];
$link_id=$link_id+1;
$query="SELECT images FROM pictures WHERE id=$id";
$stmt2=$conn->query($query);
$pictures=$stmt2->fetchAll(PDO::FETCH_ASSOC);
foreach($pictures as $rowimg)
{
$img=$rowimg['images'];
?>
<b><a id='<?php echo $link_id;?>' class='link_class' onclick='myfunc();'> <?php echo $img;?> </a></b>
<br><br>
<div id='modal_id' class='modal_class'>
<div class='modal_content_class'>
<img id='<?php echo $id;?>' class='img_class' src="images/<?php echo $img;?>" width='300' height='260'>
<span id='close_id' class='close_class' onclick="modal.style.display='none'">×</span>
</div>
</div>
<script>
var modal = document.getElementById("modal_id");
var closebtn =modal.getElementsByClassName("close_class");
function myfunc()
{
modal.style.display='block';
document.getElementById('<?php echo $id; ?>'). src="images/<?php echo $img;?>";
console.log(123);
};
</script>
}
}
}
Output
Output

How do I trigger this hover function each time a new image has focus?

How can I hide all the images in a recordset except the image with the mouse hover on?
Images are displayed from the database and I am trying to manipulate how the images respond when a user hovers on any particular image.
Based on what I have read here on stackoverflow I came up with the following that actually works but with one limitation
On page load it works fine but once you start moving from image to image nothing happens.
I want only the active or image with hover to show while hiding the rest.
$(document).ready(function() {
$('.teamDisplay').hover(function(){
var infoFont = $(".imageDiv")
var $imgLink = $(this).children(infoFont).attr("data-imgPath");
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOff');
$(this).addClass('imageDivOn');
}, function(){
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOn');
$(this).addClass('imageDivOff');
});
});
I am also using css to show or hide the images but the hover function appears to work just once on page load.
How do I trigger this hover function each time a new image has focus?
This is the website with the feature I hope to replicate
UPDATE
The html code
`<div class="memberPicBg">
<?php do { ?>
<span class="teamDisplay">
<?php
// Show If File Exists (region1)
if (tNG_fileExists("../images/team/", "{members.tmemberphoto}")) {
?>
<span class="imageDiv" data-imgPath="../images/team/<?php echo $row_members['tmemberphoto']; ?>">
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span><br /><br />
<img src="../images/team/<?php echo $row_members['tmemberphoto']; ?>" alt="<?php echo my_meta_description($row_members['tmember'],6); ?>" border="0" /> </span>
<?php
// else File Exists (region1)
} else { ?>
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span>
<?php }
// EndIf File Exists (region1)
?>
</span>
<?php } while ($row_members = mysql_fetch_assoc($members)); ?>
</div>`
NB: apologising if I am not clear enough.

Button to reload the contents of a div which contains php

I have a div containing php that loads a random image from a directory. This bit works fine when i reload the page. The code:
<div id="imageArea">
<?php
$dir = 'images/assets/';
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?>
<img src="images/assets/<?php echo $images[$i]; ?>" alt="<?php echo str_replace(array('.jpg', '.png', '.gif'), '', $images[$i]); ?>"/>
</div>
And further down the page i have another div that contains a button. I want it so that when people click this button it loads a new random image, i guess it would reload the div, but i don't want it to reload the page, is that possible? The button:
<div id="newPic">
<input type="button" value="Reload" id="Reload"/>
</div>
I have tried:
<script>
$(document).ready(function(){
$("#Reload").click(function(){
$("#imageArea").html("result reloaded successfully");
});
});
</script>
and:
$(document).ready(function(){
$("#Reload").click(function(){
$("#imageArea").html(ajax_load).load(loadUrl);
});
});
I am new to php and javascript and so i have been following other peoples instructions.
Thank you

split your php script to another file (just echo the img tag), and then use ajax to call that page.
$("#reload").click(function(){
$.ajax({
url:"demo.php",success:function(ajax_load){
$("#imageArea").html(ajax_load)
}});
});
php file
<?php
$dir = 'images/assets/';
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?>
<img src="images/assets/<?php echo $images[$i]; ?>" alt="<?php echo str_replace(array('.jpg', '.png', '.gif'), '', $images[$i]); ?>"/>

have you tried to use ajax to update the div with the image?
here's the code
$(document).ready(function(){
$('#clickme').click(function(){
var number = 1 + Math.floor(Math.random() * 10);
$('#contentimg').attr('src','0'+number+'.jpg');
});
});
this would work given that the images are in the same folder else give the src of image accordingly

Get cache with yii to image function

I have this javascript code:
function Thumbnail(url) {
$.each(url, function(key, value){
$('#thumb_'+key).load(function(){}).attr('src', "http://domain.com/="+encodeURIComponent(value));
});
}
Thumbnail({<?php echo $id ?>:'<?php echo $domain ?>'});
and i have this php code:
<img class="thumbnail" id="thumb_<?php echo $id ?>" src="" />
how can i save this image to be in folder by chach (CFileCache) (i dont need to change the image a lot so the image can be saved in cache for a long time)

javascript lightbox2 - how to add class to the opened img?

I am having trouble with the lightbox2 plugin.
I have an image who has class on it, and I want that the class will also be added when the image opened in lightbox.
is it possible?
<a href="fileUpload/uploads/<?php echo $picture['gallery_src']; ?>" data-lightbox=<?php echo '"image-'.$picture['gallery_id'].'"' ?>>
<img src=<?php echo '"fileUpload/uploads/'.$picture['gallery_src'].'"';?> id="filter-target" style="width:600px;">
</a>

Here's a cleaned up version of your PHP. Remember to remove your duplicate IDs
echo '<a href="fileUpload/uploads/'.$picture['gallery_src'].'" data-lightbox="image-'.$picture['gallery_id'].'">';
echo '<img src="fileUpload/uploads/'.$picture['gallery_src'].'" id="filter-target" style="width:600px;">';
echo '</a>';
You can add classes and data attributes to the image being viewed by running the following code:
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(e) {
$('#lightbox .lb-image')
.addClass('filter-blur')
.data('pb-blur-amount', 5);
});
Here's a demo