Question

I am editing my question after in depth searching about my problem basically my website is a fashion display website it displays shoes cloths and bags etc now its obvious that i will be having lots of pics i was solving my problem with jquery and javascript that when a user clicks a thumbnail on the index page or he goes to the menu and clicks the shoes link javascript opens the larger image in a new tab but now i m switcing to php what i did is below

1. I made a mysql database having paths to the images like images/zara/thumbnails/shoes for thumbnails and images/zara/shoes for the larger images

2. when the user clicks on the links for ex(shoes) the link text will be grabbed by jquery like this

      $(document).ready(function() {
       $('ul.sub_menu a').click(function() {
           var txt = $(this).text();  
               $.ajax({
               type: 'POST',
               url: 'thegamer.php',
               data: {'txt'}
               });
       });
   });
   

Further pass it to the php file now here i m facing a problem what i need at the moment is

that how will php make search on the basis of that var txt in the database retrieve the thumbnails of the shoes open a new tab say(shoes.html) and display all the available shoes thuumbnails in divs

Answer 1

Css:

#imagePopup{ float:left; z-index:10; position: absolute;} 

Add some positioning

HTML:

<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" alt="ZARA"/>
</div>

<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" alt="PUMA"/>
</div>

<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>

JS:

$('.prodcls').click(function(){
   var src = $(this).attr('src').replace('/thumbnail', '');
    $("#imagePopup").html("<img src='"+src+"'/>")
    $("#imagePopup").toggle();
});

Updated answer:

HTML: (give every image a link):

<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>

showImage.php:

$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;