...

View Full Version : Best solution for having a link clicked in a div load an image into another?



Webster_123
04-18-2011, 12:32 AM
Hi there,
i'm a total newbie at this and am taking a class in web design, using Dreamweaver. So, we're supposed to be creating our own website and I've created mine, however, one of the pages has thumbnails that I would like to enlarge. I've created 9 thumbnails of photos in a div on the right hand side of the page. (There are 3 on each line...so it's basically a block of thumbnails). To the left of the thumbnails, I have placed another div to hold the "large" version of the image that appears after clicking on the thumbnail.

I know how to write the code if you're clicking on a thumbnail and you want it to enlarge on a new page, etc., however, how do you do it if you have an actual placeholder where you want the image to go? I thought the "target" would be something I could use..but it doesn't look like I can choose my div to be a target. If there's anyone that could help me with this, I would really really appreciate it.

Thanks,

bullant
04-18-2011, 12:43 AM
I am a little confused.

Do you want to know which buttons to click in Dreamweaver to produce the effect or how to hand code the javascript to display the enlargements on a button click.

Since you put your post in the html/css forum, I assume you are aware this can also be done without javascript altogether using the css psuedo class :hover.

So do you need this done with or without javascript?

Webster_123
04-18-2011, 01:14 AM
Hey,

No, I have no idea what buttons to press in Dreamweaver...sorry my post was so confusing. :( I've been going back and forth between the code view and the design view so wasn't sure where to post this.

So, if I can't do the clicking of the thumbnail to show the larger image in the designated div, I wouldn't mind using hover. I have no idea how to use javascript, but I am using dreamweaver cs5...so if there's an easy way of doing it...that would be great. I know there's an area for "behaviours", but again, I've figured out how to change an image in the same div that I'm in...not in a totally different div. Does that make sense?

VIPStephan
04-18-2011, 01:25 AM
Something like this (http://www.cssplay.co.uk/menu/clickgallery.html)?

bullant
04-18-2011, 01:35 AM
So, if I can't do the clicking of the thumbnail to show the larger image in the designated div, I wouldn't mind using hover. I have no idea how to use javascript, but I am using dreamweaver cs5...so if there's an easy way of doing it...that would be great. I know there's an area for "behaviours", but again, I've figured out how to change an image in the same div that I'm in...not in a totally different div.

The point I was making was that you can have either functionality. With the layout you described, I would do it using just css and so you won't have to worry about users with javascript disabled browsers.

Since you have no experience with javascript, you would have to use DW to write the code for you if you want a click functionality. I'm not a DW user. No offence, but someone once said that the only thing you can learn from DW is how to not build a website. Every else being equal I would normally recommend people to have a good grasp of hand-coding html/css/javascript before playing with DW.

Webster_123
04-18-2011, 01:54 AM
Yes, fair enough..no offence taken....I totally understand. That's why I came here. I'm taking a class called web page design, and unfortunately, they're using Dreamweaver to teach it....and because I'm a newbie in both dreamweaver and html, I'm struggling. One class only does it in code, the other one is only using Dreamweaver. I took an html class before, but I've been finding all the courses are very basic in what they're teaching...anything a little bit out of what the course covers, the teachers aren't able to answer. I guess i have to find good tutorials and practise that way....

I do appreciate the help....thank you for responding. :)

VIP STEPHAN....yes, that's exactly it! Except my thumbnails are to the right. I'll take a look at the code and see if I can figure it out. Thank you!

bullant
04-18-2011, 02:41 AM
ok no problem :)

Maybe use this demo from my reply in a similar thread as a guide.

You can add as many images and captions as you like to the picData array without having to touch the html or javascript.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p {
clear: both;
}
#ulThumbs {
clear: both;
list-style-type: none
}
#ulThumbs li {
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline
}
#imgEnlargeContainer {
width: 50%;
float: left
}
#descContainer {
width: 50%;
float: right
}
#enlargeContainer {
opacity: 0;
filter:alpha(opacity=0)
}
</style>
<script type="text/javascript">
var picData = [
['num1.jpg','description 1'],
['num2.jpg','description 2'],
['num3.jpg','description 3'],
['num4.jpg','description 4']
];
var thumbMaxWidth = 100;
var thumbMaxHeight = 100;
var fadeTimer;
function showEnlargement(picNum){
var nextThumbIndex = (picNum+1 > picData.length-1)? 0 : picNum+1;
if(fadeTimer){
clearInterval(fadeTimer);
curOpac = 0;
setOpacityCSS();
}
imgEnlargeO.src = picO[picNum].src;
descContainerO.innerHTML = picData[picNum][1];
fadeTimer = setInterval(setOpacity,100);
}
var curOpac = 0;
var speed = 0.2;
function setOpacity() {
curOpac = curOpac + speed;
if(curOpac <= 10){
setOpacityCSS();
}
}
function setOpacityCSS(){
if(typeof(enlargeContainerO.style.opacity) == 'string'){
enlargeContainerO.style.opacity = curOpac/10;
} else {
enlargeContainerO.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
}
}
window.onload=function(){
enlargeContainerO = document.getElementById('enlargeContainer');
imgEnlargeO = document.getElementById('imgEnlarge');
descContainerO = document.getElementById('descContainer');
//load the images into an Image object
picO = new Array();
for(i=0; i < picData.length; i++){
picO[i] = new Image();
picO[i].src = picData[i][0];
}
//create the thumbnails
var ulThumbsO = document.getElementById('ulThumbs');
var thumbDims = new Array();
for(i=0; i < picO.length; i++){
liO = document.createElement('li');
imgO = document.createElement('img');
imgO.src = picO[i].src;
thumbDims = calcNewDimensions(picO[i].width, picO[i].height, thumbMaxWidth, thumbMaxHeight);
imgO.width = thumbDims['width'];
imgO.height = thumbDims['height'];
imgO.num = i;
imgO.onclick=function(){
showEnlargement(this.num);
}
liO.appendChild(imgO);
ulThumbsO.appendChild(liO);
}
//set a default random enlargement and description
var picNum = Math.floor(Math.random()*picData.length);
showEnlargement(picNum);
}
//-------------------------------------------
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
</script>
</head>
<body>
<!-- preload the images so we can use their actual width and height property
to scale the thumbnails -->
<div id="preloadedPics" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < picData.length; i++){
var newImg = document.createElement('img');
newImg.src = picData[i][0];
newImg.alt = picData[i][1];
document.getElementById('preloadedPics').appendChild(newImg);
}
</script>
<!-- --------------------End of image preloads ------------------ -->
<div id="enlargeContainer">
<div id="imgEnlargeContainer">
<img id="imgEnlarge" src="" alt="" />
</div>
<div id="descContainer"></div>
</div>
<p>Click on a thumbnail</p>
<ul id="ulThumbs"></ul>
</body>
</html>

Webster_123
04-18-2011, 04:42 AM
Thank you guys! I got it!!! woo hoooooo

bullant
04-18-2011, 05:13 AM
no problem :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum