how can I use button images to get the button image source when they are clicked using html and css

Question

I created a gallery with buttons using html and css. Currently started learning javascript, so hoping this can be done without it. I'm trying to open a full screen image in a new window once the button is clicked. I'm trying to make the source of each button appear on the new window once the button is clicked. I have over 50 button images, so I was wondering if there's a way to get the source of each image that is clicked and opened full screen on the new window.

This is my gallery of image buttons

This is the html code for the gallery

Answer 1

Firstly you don't have to use buttons to put a click event on a image. I created an example where you click on a image and transfer its URL to another place. It's the same principle you need. It's a jQuery solution.

Next time, post your code here instead a image.

JSFiddle: http://jsfiddle.net/6tf9uk6x/

 $("img.btnImage").on("click", function() { $("#selectedImage").html("<img src='"+$(this).attr("src")+"'/>"); }); 

 #selectedImage, #selectedImage img { width: 100%; clear:both; } .btnImage { float:left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" width="100" class="btnImage" /> <img src="http://dreamatico.com/data_images/cat/cat-6.jpg" width="100" class="btnImage" /> </div> <div id="selectedImage"> <h1>No image selected</h1> </div> 

Answer 2

Make the buttons links instead.

<a target="_blank" href="/assets/RaveCandy/picName.gif">
  <!-- image tag as usual -->
</a>

Answer 3

As you said "I'm trying to open a full screen image in a new window once the button is clicked." , so you do not need to use button here.

Just make use of anchor tag in a more broad way. Use target="_blank" to open src of the link in the new window.

Instead of text link inside anchor tag use img tag.

<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis"></a>

Here is the working example, you may like it.