Clever Geek Handbook

How to use jQuery

I wrote jQuery code in files Main.html

and ajax.php

. The file ajax.php

returns a 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 images in Main.html.

Now when I click on the Image1 link from Main.html the corresponding image should be displayed in the same window.

So, I wondered if I need to use jQuery again to view the image on the same page. How can I achieve this?

0


source to share


4 answers


The ajax.php

output file should return 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 the jQuery code:

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


source


It looks like you can take a look at the jQuery lightbox plugin .



+1


source


You can do something like this:

Define this div in html:

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

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

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

You need to structure your code to get image_url easily.

0


source


Try the following:

Place a hidden div in your image page (tag img

):

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

Set a class for all images coming from the file ajax.php

and put it in its attribute. I put it in an attribute Title

.

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

And the jQuery code:

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

Or you can write a function to do this and set the onclick of images to trigger it. This method is not recommended.

0


source






More articles:


All Articles