CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Emilie
Emilie

Reputation: 1

How to open a new page with the same image showing as you clicked on using jquery

I am relatively new to javascript and I'm looking for the best possible way to explain this problem. Hope anyone can give me advice on this

I have this : 

<div class="col-md-4">
        <a href="stuffedd.html"><img src=""></a>
        <a href="stuffedd.html"><img src=""></a>
        <a href="stuffedd.html"><img src=""></a>
</div>

When Clicked on img it's redirected to the stuffedd.html page. However this contains 2 columns with images. A vertical thumbnail column and a middle column with large image.

Like this:

<div class="middle containerscroll">
    <img src="" id="Mdrie" class="img-responsive ">
    <img src="" id="Mvier" class="img-responsive ">
    <img src="" id="Mvijf" class="img-responsive ">
</div>
div class="col-md-9 hidden-xs hidden-sm">
    <img src="" id="drie" class="img-responsive single">
    <img src="" id="vier" class="img-responsive single">
    <img src="" id="vijf" class="img-responsive single">
</div>

I got this far with Jquery :

$(document).ready(function(){

"use strict";
$( ".single" ).hide();

$( "#Mdrie" ).on('click',function() {     
 $('#drie').toggle();
$(".single").not('#drie').hide();

});

How do I make the stuffedd.html open with the image I clicked on in the second div (all the images with class .single) Do I declare a variable which I fill in as:

$( "var" ).show();

website is: www.damondebacker.com if you need to see it.

Upvotes: 0

Views: 137

Answers (2)

rahcon
rahcon

Reputation: 31

Try to transfer the ID of the picture on the first page with your URL. So you click on the Image and the link is something like /stuffed.html?id=drie. Later on your stuffed site, you get the parameter with jquery in a variable and show exactly this image. Here is a short tutorial for URL Parameters and jQuery

Upvotes: 0

Octopus
Octopus

Reputation: 8325

If I understand the question, the second page needs to be aware of what you clicked on the previous page, consider adding some identifier into the URL that identifies the image:

<a href="stuffedd.html#Mdrie"><img src=""></a>

Then the second page has a spot to extract it from. If you don't want it in the URL you could set a cookie or use the LocalStorage object.

Upvotes: 1

Related Questions