0

I created one html file where are all the photos and one another html file where I see only 1 image full sized. Now If I click one image from the first file I want these to be open into this second html page using his src from the first file I want to use javascript. (yeah I know I can create 20 html files where in each have a different photo but I want to use only 1 html file)

File 1 = "index.html":

 <a href="work_detail.html" ><img src="images/templatemo_image_01_big.jpg" alt="image" 
 width="100%" height="100%" id="pic1" onClick="hello();" /></a>

File 2 = "work_detail.html" :

 <a target="_parent"><img src="" alt="product" id="work" /></a>

JavaScript:

 function hello(){
  var pic1 = document.getElementById('pic1').src;
 document.getElementById('work').src= pic1;
 }

How to connect the first id with the second id where them are in different files using JavaScript?

j08691
  • 204,283
  • 31
  • 260
  • 272
manuel.koliqi
  • 313
  • 1
  • 3
  • 11

2 Answers2

0

One option I can think of is to have the second page receive the source of the image as url parameter. Here is a post describing how you can read url parameters with javascript.

After that use the image src and set it to the second image. You will need to url encode the url by the way. For the encoding use encodeURIComponent like that:

str = encodeURIComponent(imageSource);

You decode in the receiving page with decodeURIComponent like that:

str = decodeURIComponent(uri_encode);
Community
  • 1
  • 1
Boris Strandjev
  • 46,145
  • 15
  • 108
  • 135
0

Consider PHP.

In php it will be like

The page which will show the full image as

<?php
$src= isset($_GET['src']) ? $_GET['src'] : "default_image_url.ext";
$alt= isset($_GET['alt']) ? $_GET['alt'] : "default_alt";
echo "<img src='$src' alt='$alt'>";

Now, on main javascript page, add it

function GtU(url, alt){
 window.location.href="second_page.php?src="+url+"&alt="+alt;
}

And in every img tag add this, <img src="source" alt="alt" onclick="GtU(this.src, this.alt)" > and its a lot better way actually... Just only a little bit of server side is required. It can be done with cookies as well, but it'll make the hands dirty

Ronnie
  • 512
  • 5
  • 12