Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Best solution for having a link clicked in a div load an image into another?

    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,

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Something like this?

  • Users who have thanked VIPStephan for this post:

    Webster_123 (04-18-2011)

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Webster_123 View Post
    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.

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.
    Code:
    <!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>
    Last edited by bullant; 04-18-2011 at 02:48 AM.

  • Users who have thanked bullant for this post:

    Webster_123 (04-18-2011)

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you guys! I got it!!! woo hoooooo

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •