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
    May 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding Text Below Enlarged Images

    Using Dreamweaver 8 to build my site. Using JS Query thumbnail viewer 2 for my thumbnail scripts.

    I did not want captions where my mouse hovers over the thumbnail. It was recommended to me to change the "title" attribute to "info". This is how it was configured:

    <a href="http://www.loftmidcentury.com/arco lamp 4.jpg" info="This is some product information!" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade"><img border="0" src="http://www.loftmidcentury.com/arco lamp 4.jpg" width="91" height="91"></a><br/>Arco Lamp

    There are no captions when I hover over the thumbnail but I would like to have text appear the enlarged images for product description.

    If anyone can assist and need to see my source code to help my site is:

    www.loftmidcentury.com

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo as a guide.

    You can put as many images and captions as you like in the picData array and the thumbnails will be created dynamically without having to touch the html.

    When you mouseover an image, it's enlargement and caption will fade in. The captions are not displayed with the thumbnails.
    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.onmouseover=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>Hover on a thumbnail</p>
            <ul id="ulThumbs"></ul>
        </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what script is this? will it work with the one i'm using now? i'll definitely give it a shot.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by angel71 View Post
    what script is this? will it work with the one i'm using now? i'll definitely give it a shot.
    What I posted is a standalone demo of one way you can create thumbnails dynamically and have their enlargements and associated descriptions appear when you mouseover a thumbnail.

    Using the concepts in the demo, you should be able to tweak your code to produce the effects you require. You won't be able to just plug the code I posted into your code.

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very much bullant.

    i'm still getting myself educated using scripts but i will do my best to understand the demo you've suggested. my main concern is that i really would like to use the current script i'm using so if you dont mind me asking, will this be compatible with jsquery thumbnail viewer?

  • #6
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry bullant,

    don't know why i didn't see your reply when i refreshed my page. i will test and tweak.

    thank you.

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by angel71 View Post
    thank you very much bullant.

    i'm still getting myself educated using scripts but i will do my best to understand the demo you've suggested. my main concern is that i really would like to use the current script i'm using so if you dont mind me asking, will this be compatible with jsquery thumbnail viewer?
    Unfortunately I'm not familiar with jsquery thumbnail viewer.

  • #8
    New to the CF scene
    Join Date
    May 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    my apologies...it's actually called jquery. are you familiar with it? if you could help me that'd be great. here is my site in case you wish to view my code.

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    No, I'm still not familiar with it since I am not a huge javascript user.

    But any "plain" javascript should not interfere with any jquery if there are no clashes of function names, global variable names etc between the 2.


  •  

    Posting Permissions

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