ansaurus

Question

How to use jQuery

Answer 1

+1 A:

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

Russ Cam 2008-12-16 09:03:40

Answer 2

A:

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.

kgiannakakis 2008-12-16 09:03:58

Answer 3

A:

try this:

put a hidden div in your page that has a img:

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

set the class for all images that come from ajax.php and put the big image source in a attribute of it. I put it in 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.

Ata 2008-12-16 09:04:23

Thanks Ata , its another perspective result

venkatachalam 2008-12-16 09:50:51

Ata Will You Check my Error spot I done , I have Modified the code and still i have problem any Solution?

venkatachalam 2008-12-16 11:59:45

Hi venkatachalam, I read your answer again, but I can't understand that what's your problem. May you explain your answer more for me?

Ata 2008-12-16 18:38:55

Yes Ata , The ajax.php has the following function 1.echo "<img src="src1" alt="name1"> 2.echo "<img src="src2" alt=name2>Yes its hidden by adding <display:none> while click the hyperlink thatcorresponding image need to display ,Instead i used to click image to show that Image as you suggest

venkatachalam 2008-12-17 04:20:08

Answer 4

A:

ajax.php output must 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 JQuery:

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

Ata 2008-12-17 14:12:57

ansaurus

tags:

views:

answers:

How to use jQuery

related questions