get images from mysql with php jquery ajax and display them in html page inside DIVs

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

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

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

<a href="images/zara1.png" target="_blank"><img src="thumbnail/zara1.png"></a> should open the bigger image in new window — defau1t
– defau1t, Commented Dec 22, 2011 at 6:15

Jake Feasel · Accepted Answer · 2011-12-22 07:52:04Z

3

Here's the jquery code that should work:

<script>
$(function () {

  $(document).on('click', 'div.prodcls img', function (e) {
    e.preventDefault();
    window.open($(this).attr('src').replace('/thumbnails', ''), '');
  });

});
</script>

And some css for good measure:

<style>
div.prodcls img:hover {
  cursor: pointer;
}
</style>

Here's a working fiddle: http://jsfiddle.net/DenGp/

edited Dec 22, 2011 at 7:52

answered Dec 22, 2011 at 6:12

Jake Feasel

17k5 gold badges55 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jake Feasel Over a year ago

Note, as I hope is obvious - in this code, I assumed that by "new tab", you meant a new browser tab (which most browsers do by default these days when they see a window.open). If you meant something else, this can be easily modified to do just about anything (pop a lightbox, for example).

sajid Over a year ago

my jquery is not working as javascript is working i have attached the library in script but not working whats the prblem

Jake Feasel Over a year ago

Can you provide a link? What exactly is not working? Are you getting a javascript error?

sajid Over a year ago

what if i target a div to open the image then what will be the code

Jake Feasel Over a year ago

Look into the lightbox answer that DmitryB provided.

|

Derk Arts · Accepted Answer · 2011-12-25 15:22:58Z

2

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>;

edited Dec 25, 2011 at 15:22

answered Dec 22, 2011 at 6:14

Derk Arts

3,4702 gold badges20 silver badges36 bronze badges

12 Comments

sajid Over a year ago

this one is also ok but for gallery

sajid Over a year ago

<div id="prodoneid" class="prodcls"> <a href='images/zara/1.png' target='_blank'><img src="images/zara/thumbnails/1.png" alt="ZARA"/> </a></div> this is my code but it is still openning the thumbnail

Derk Arts Over a year ago

With my solution you don't need the <a href="">, just use the code I provided above. Altough it is strange that you would see the thumbnail when you click that link, but thats another matter.

sajid Over a year ago

can u please explain the .attr('').replace('/thumbnail','')

Derk Arts Over a year ago

.attr('').replace('/thumbnail','') replace the part of the SRC that says '/thumbnail' with '', so it actually removes that part. .html(src) sets the HTML of the selected element to that source. Actually that should be .html("<img src='"+src+"'/>"). Also see: api.jquery.com/html and w3schools.com/jsref/jsref_replace.asp

|

Naveed · Accepted Answer · 2011-12-22 06:30:16Z

2

You can open actual image in new browser tab without jQuery:

For Example:

<div id="prodoneid" class="prodcls">
  <a href='images/zara1.png' target='_blank'>
    <img src="images/thumbnail/zara/1.png" alt="ZARA"/>
  </a>
</div>

edited Dec 22, 2011 at 6:30

answered Dec 22, 2011 at 6:13

Naveed

42.3k31 gold badges101 silver badges132 bronze badges

4 Comments

sajid Over a year ago

ur code is opening the thumbnail image in the new window i want the large one which is in images/zara/1.png

Naveed Over a year ago

Please use larger image path in href of <a href='images/zara/1.png' target='_blank'>

sajid Over a year ago

ok it worked but naveed if i want to point a div in a specific page like a <div id="lareimage"></div> in this page fprodone.html

Naveed Over a year ago

You can use jQuery's $.ajax() function to achieve this ? For Example: stackoverflow.com/questions/3326614/…

dbrin · Accepted Answer · 2011-12-22 06:13:13Z

0

Perhaps a lightbox is what you really need? take a look at this library: http://www.huddletogether.com/projects/lightbox2/

answered Dec 22, 2011 at 6:13

dbrin

15.7k4 gold badges59 silver badges85 bronze badges

2 Comments

sajid Over a year ago

yah that is solving my problem but i want the larger image to open in a new window how will that be solved

dbrin Over a year ago

r u sure that is what you want?

Derk Arts · Accepted Answer · 2011-12-25 16:59:43Z

0

You have an error in your AJAX code (your forgo to include the actual var:

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

Now in PHP:

$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.

answered Dec 25, 2011 at 16:59

Derk Arts

3,4702 gold badges20 silver badges36 bronze badges

1 Comment

sajid Over a year ago

data: {'txt':txt} //added :txt here with ur this code u r making the link catch static i have a number of items like jeans trousers shoes shirts bags caps and a lot more i want to make it dynamic that whatever link is clicked the the jquery grabs the text and forward it to the php in ur code shall i mention the code like this 'txt':shoes

Collectives™ on Stack Overflow

get images from mysql with php jquery ajax and display them in html page inside DIVs

5 Answers 5

10 Comments

12 Comments

4 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

12 Comments

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related