hi . im trying to figure out what the best possible way would be for me to zoom into a selected img/div.
i have multiple divs with images in them and when a user clicks on one of them i would want the selected image to fill the whole screen.
it doesnt have to have the animation zoom in effect.
i was thinking of 2 ways of doing this.
i thought about using the url from the selected img and clearing the whole page and basicly re-create it with only one div and img inside of it with the url as source. but i havent been able to do this.
second i was thinking of maybe using the element's cooridnates and just using that of a way of determining how far it should be streched to fit in the window.
i havent had any luck with either and any help would be welcomed. ill post the code below
there are various things in there that i am trying out or doing wrong, any advice is always apreciated.
ps. not alowed to use any libraries it has to be js written from scratch.
function createPage()
{
alert("vulpagina geactiveerd, j????");
var maindiv =document.getElementById("maindiv")
var maindiv2 = document.createElement("div")
maindiv2.setAttribute("id","maindiv2")
maindiv.appendChild(maindiv2)
imgload();
}
function imgload()
{
for(i=1; i<26; i++)
{
addimg()
}
}
function addimg()
{
var maindiv=document.getElementById("maindiv");
//alert('imgload called')
var imgnr = i-1;
var div=document.createElement("div");
var img=document.createElement("img");
var br=document.createElement("br");
img.src=album[imgnr].url;
div.appendChild(img)
div.setAttribute('style','float: left; width: 190px; height: 110px; margin: 10px; margin-left: 30px; text-align:center;');
div.setAttribute("id","div" + i);
img.setAttribute('style','width: auto; height: 100%; border: solid 3px white;');
img.setAttribute("id", "img" + i )
img.setAttribute("display","inherit")
img.setAttribute("display","inherit")
img.addEventListener('click',zoomIn, false);
maindiv.appendChild(div);
}
function zoomIn(e)
{
alert('zoominfc')
var target = e.target;
if (window.event) e = window.event;
var srcElement = e.srcElement? e.srcElement : e.target;
alert(srcElement.id)
alert(srcElement.parentNode.id)
target.style.display="none"
target.parentNode.style.display="none"
//removeallimages();
maindiv = document.getElementById("maindiv")
body = document.getElementsByTagName("body")
maindiv.parentNode.removeChild(maindiv)
//target.style.height = "500px"
//target.parentNode.height = "500px"
}
function removeallimages()
{
div = document.getElementById("div1")
img1 = document.getElementById("img1")
alert('removeimgs')
div1.removeChild(img1)
div1.parentNode.removeChild(div1)
}
var album =
[
{
url: 'images/0006787.jpg',
landscape: false,
description: 'Shadows to the sea...',
photographer: 'Sander',
date: new Date('12-8-1999')
},
{
url: 'images/0004713.jpg',
landscape: false
},
];