CODEWITHSUNDEEP
jqueryajaximage
venkatachalam
venkatachalam

Reputation: 102439

How to use jQuery

I have written jQuery code, in files Main.html and ajax.php. The ajax.php file returns the link of images to Main.html.

Now in Main.html, I have Image1, Image2, Image3, etc.

My Main.html file:

<html>
    ...
    # ajax.php Call
    ...
    # Return fields from Ajax.php
</html>

My ajax.php file

echo "<a href='src1'><img src='src_path1' id='fid1' alt='Name1' /></a>Click To View image1\n";
echo "<a href='src2'><img src='src_path2' id='fid2' alt='Name2' /></a>Click To View image2\n";
// etc.

So, after executing ajax.php, I get the image locations in Main.html.

Now, when I click the Image1 link from Main.html, that corresponding image should display in the same window.

So I thought about whether again to use jQuery to view an image on the same page. How can I achieve this?

Upvotes: 0

Views: 589

Answers (4)

Atta
Atta

Reputation: 337

Try this:

Put a hidden div in your page that has an image (tag img):

<div id="imageDivisionHolder" style="disply:none;">
    <img id="imageItemHolder" src="" alt="" />
</div>

Set the class for all images that come from file ajax.php and put the big image source in an attribute of it. I put it in the Title attribute.

<img src='src_path1' id='fid1' alt='Name1' class='item' Title='src_path1_bigimage' />

And the jQuery code is:

$(document).ready(function(){
    $("img.item").click(function(){
        $("#imageItemHolder").attr("src",$(this).attr("title"));
        $("#imageDivisionHolder").show();
    });
});

Or you can write a function that do it and set the onclick of images to run it. This way is not recommended.

Upvotes: 0

Russ Cam
Russ Cam

Reputation: 125488

It sounds like you might want to take a look at the jQuery lightbox plugin.

Upvotes: 1

Atta
Atta

Reputation: 337

File ajax.php output must return the below HTML:

<a href="#" class="imageLink" title="fid1"><img src="src1" id="fid1" alt="Name1" style="display:none;" /><span>Click To View image1</span></a> 
<a href="#" class="imageLink" title="fid2"><img src="src2" id="fid2" alt="Name2" style="display:none;" /><span>Click To View image2</span></a> 
<a href="#" class="imageLink" title="fid3"><img src="src3" id="fid3" alt="Name3" style="display:none;" /><span>Click To View image3</span></a>

And jQuery code:

$(document).ready(function(){
    $("a.imageLink").click(function(){
            $("#"+$(this).attr("title")).show();
        $(this).find("span").hide();
    });
});

Upvotes: 0

kgiannakakis
kgiannakakis

Reputation: 104178

You could do something like this:

Define this div in your html:

<div id="pictureframe"></div>

Now add an onclick handler on the image links to do the following:

$("#pictureframe").load(image_url);

You need to structure your code to easily retrieve the image_url.

Upvotes: 0

Related Questions