Javascript picture pop-up problem
2 posts
• Page 1 of 1
Javascript picture pop-up problem
by Copopit » Sat Sep 15, 2012 4:21 pm
Hello, I'm making a picture pop-up kind of thing, you click a thumbed image and it expands and change to a 2nd image with higher resolution and different dimensions. But the thing is that I'm stuck at how I would go by getting the thumbnail to change its source using onClick and changing it back when clicked once more in the expanded state.
With the following code I only expand the thumbed image, but what I want is when onClick the source of the pos1 change so the better resolution image replace the thumb one, and giving the non-thumbed image the "full" class.
You might get a better idea of what I mean by looking at this: https://dl.dropbox.com/u/7798429/test_simen/index.html
Currently the only picture I'm working on is the top legt one, the transition is something that is rather easy to change, so I haven't done much to that yet since the pop-up itself doesn't work.
- Code: Select all
<html>
<head>
<script>
function onClick1(bilde)
{
if (bilde.getAttribute("class") == ("po1"))
{
bilde.setAttribute("class", "full");
}
else
{
bilde.setAttribute("class", "pos1");
}
}
</script>
<style>
.full{
left: -100px;
top: 0px;
z-index: 4;
opacity: 1;
width: 600px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<img onclick="onClick1(this)" class="pos1" src="bilder/thumb/picture1.jpg">
</div>
</body
</html>
With the following code I only expand the thumbed image, but what I want is when onClick the source of the pos1 change so the better resolution image replace the thumb one, and giving the non-thumbed image the "full" class.
You might get a better idea of what I mean by looking at this: https://dl.dropbox.com/u/7798429/test_simen/index.html
Currently the only picture I'm working on is the top legt one, the transition is something that is rather easy to change, so I haven't done much to that yet since the pop-up itself doesn't work.
Re: Javascript picture pop-up problem
by Zekas » Mon Sep 17, 2012 5:39 am
I assume you have to make this for your course. If not, I would suggest using existing solutions, like LightBox or another jQuery solution.
I do notice a typo though: if (bilde.getAttribute("class") == ("po1")) -> Should probably be 'pos1'.
I do notice a typo though: if (bilde.getAttribute("class") == ("po1")) -> Should probably be 'pos1'.
Streamer & staffmember for GuildWars2Live.com
2 posts
• Page 1 of 1
Who is online
Users browsing this forum: No registered users and 1 guest