Multiple images clickable javascript, jquery

Question

I have a little gallery on my website with several images, and I am trying to make each image clickable where when one is clicked, that image will increase in size while the others will dissapear. I have an idea of how to do it, but I dont want to have a thousand click functions for each image if that makes sense.

Here is my JavaScript code for the images

         $("#images").click(function (e) {
             $("#images img").css({ width: "0px", height: "0px"});
             e.target.style.width = "400px";
             e.target.style.height = "400px";
             $("#images").stop();
         });

Here is the markup for the images wrapped in a div element. There are more images just didnt want to put them all on here

<div id="images">
            <asp:Image ID="Image1" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery1_Small.jpg" />
            <asp:Image ID="Image2" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery2_Small.jpg" />
            <asp:Image ID="Image3" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery3_Small.jpg" />
            <asp:Image ID="Image4" hspace="25" vspace ="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery4_Small.jpg" />
            <asp:Image ID="Image5" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery5_Small.jpg" />
            <asp:Image ID="Image6" hspace="25" vspace ="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery6_Small.jpg" />
            <asp:Image ID="Image7" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery7_Small.jpg" />
            <br />
            <br />
            <asp:Image ID="Image8" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery8_Small.jpg" />
            <asp:Image ID="Image9" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery9_Small.jpg" />
            <asp:Image ID="Image10" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery10_Small.jpg" />
            <asp:Image ID="Image11" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery11_Small.jpg" />
            <asp:Image ID="Image12" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery12_Small.jpg" />
            <asp:Image ID="Image13" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery13_Small.jpg" />
            <asp:Image ID="Image14" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery14_Small.jpg" />
            <asp:Image ID="Image15" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery15_Small.jpg" />
   </div>

#images
{
    position: absolute;
    top: 165px;
    margin-right: -50000px;
}

here is the link to where I am working on it http://portfoliobrown.com/Gallery/GalleryHome.aspx So I just want to just be able to click on an image, where the image that was clicked on increases size in the middle of the page, and the other images dissapear.

Any help would be greatly appreciated thanks a lot

tlong314 · Answer 1 · 2016-07-15T21:49:55.813

0

You can use event delegation. Bind the click event to the wrapper div, and then use e.target to identify which specific image is being used.

$("#images").click(function(e){
    // Reset the other image styles here. Doesn't really make sense to
    // hide them completely though or you will have nothing to click!
    $("#images img").css({width: "50px", height: "40px"});

    // Apply styles to the clicked image.
    e.target.style.width = "500px";
    e.target.style.height = "400px";
});

edited Jul 15 '16 at 21:49

answered Jul 15 '16 at 02:17

tlong314

546
4
8

Hello thanks a lot for taking the time to reply to my question. I was trying to work out what you did, and for some reason target is not visible as one of the properties for e or the click event. When I type in e for the event target isn't visible in the drop-down list. I typed it in anyway and thought maybe it would still work, but it doesn't. Not sure why I'm getting that issue. Thanks for any help – Jul 15 '16 at 05:27
Hi. When you say "When I type in e" do you just mean type it into the console (like it's a global variable, though it's local to this function)? If you type `Event.` into the console, _target_ won't show up in the dropdown because its bound to the Event prototype rather than directly to the Event constructor. So if you type `Event.prototype.` then _target_ should show up in the dropdown list of options. Also if you are using an earlier version of IE, you may have to use e.srcElement - see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) – tlong314 Jul 16 '16 at 17:59

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

Since you're using Jquery, you should be using this (found this reference real quick, you might something better).

I've also created a fiddle for you to take a look at. It's fairly simple, but pretty much all you need to do is add a class to your image tags so you can capture the onclick event with a selector.

$('.image').on('click', function(){
  $(this).height('100px');
  $(this).width('100px');
});

Obviously, this doesn't handle images that are already enlarged, but I'll leave that to you to play around with. If you're loading higher resolution images, expanding the height and width properties might not be the best option. You'd have to have some way of coupling each image that you click on to a higher resolution of that image (custom attribute like data-id or something similiar).

You can add another class with a styling of display: none to your other images for your onclick function. That would hide them. You would hen just remove the class when the user leaves the larger image.

Anyways, hope this helps.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 15 '16 at 22:31

sparkyShorts

630
9
28

Ok so maybe I don't completely understand, but if I wanted to have a higher resolution picture show up when one of the pictures are clicked on exactly how would that work. I mean it would make sense for the picture that was clicked on to than show the higher resolution version of that picture. I actually do have those pictures. I mean just expanding the height and width really doesn't work the best because it just stretches out the image and makes it blurry. Thanks for your help by the way, and maybe you can help me better understand a way to do it with the other picture. Thanks – Jul 16 '16 at 05:23
Well, you'd just show that the larger image. You'd have to come up with some way to have images be tied together (if this image has an id of 1 then I know it's larger image has an id of 1 ). – sparkyShorts Jul 16 '16 at 05:41
Maybe sharing all your code would help me understand your question better. – sparkyShorts Jul 16 '16 at 05:50
Okay I edited my code above, and showed you what I have. What I am trying to do now, because I have several different images is when one of the images is clicked on then all the images dissapear, and that image that was clicked will than show the larger version of that image that I have stored on my computer. When you go to the website the smaller images are shown at first. Thanks a lot – Jul 16 '16 at 06:13
@StephenBrown I've updated the answer. I'd get the images to expand first, along with hiding the other images, before you worry about loading higher resolution images. Please upvote / mark as the answer if I've been able to help you = ] – sparkyShorts Jul 18 '16 at 14:18
Hey thanks for getting back to me. I have got the images to expand and the others hidden with the code that I have above. There just blurred and stretches out. Thanks – Jul 18 '16 at 18:55

Multiple images clickable javascript, jquery

2 Answers2