asp.net problem in creating an image gallery

Question

0.00/5 (No votes)

See more:

i m trying to create an image gallery in asp.net using jquery here is the code

JavaScript

<script type="text/javascript">
        $(document).ready(function () {
            $(".thumbnail").click(function () {
                var address = $(".Bigimage").attr("src");
                $("#popup").fadeIn("slow")
                $("#lightbox").attr("src", address);
                
            });
            $("#popup").click(function () {
                $("#popup").fadeOut("fast");
            });
        });
    </script>

and this is asp.net code

C#

<div style="background:#e7e5e5; height: 674px;" >
        <img src="cars thumbnails/Chevrolet thumbnail/03_chevrolet_sail_u_va_caviar_black.png" class="thumbnail"   title="Mercedes-Benz SLK55 AMG" />
    <img src="cars%20thumbnails/Chevrolet%20thumbnail/2014-Chevrolet-Impala-LTZ-side.png" class="thumbnail"   /> 
    <img src="cars%20thumbnails/Chevrolet%20thumbnail/2014-chevrolet-impala-navy-rear-left-angle.png" class="thumbnail"   />
   </div>
    </div>
    <div id="popup">
        <div id="center" style="border:hidden;">
            <img  src="car images/chevrolet/03_chevrolet_sail_u_va_caviar_black.jpg" class="Bigimage" style="height:550px; width:600px;"/>
            <img src="car images/chevrolet/2014-Chevrolet-Impala-LTZ-side.jpg"  class="Bigimage" style="height:550px; width:600px;" />
        <img id="lightbox" src="upcomming_Cars/Mercedes-Benz SLK55 AMG.PNG" />
       
                    </div></div>

this is my asp.net image now the problem i m facing is my first thumbnail and its related big image is getting open properly but when i click on the next image the same image opens when i click on the 1st image plz do help me as soon as you can

Posted 5-Dec-13 22:22pm

siddesh_bobade

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 10434230 · Answer 1 · 2013-12-05T22:40:00

Solution 1

Hi Siddesh,
The problem is with the way you are reading the image in below line:
var address = $(".Bigimage").attr("src");

With the above code, you are reading all the Bigimage class elements and then reading the attribute value. Hence it might be returning you the first occurrence only and that may be the reason you are getting first image always.

Try reading the image from $(this).attr("src");

Let me know if this resolves your problem.

Posted 5-Dec-13 22:40pm

Member 10434230

Comments

siddesh_bobade 6-Dec-13 11:23am

No it didnt

Member 10434230 9-Dec-13 4:33am

Please put some additional details with your comments...
What are you getting in $(this) -> it should be the image element on which you are performing click...