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 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    53
    Thanks
    6
    Thanked 0 Times in 0 Posts

    do you know any tutorials to mimic this effect?

    This one: http://www.revival.com/revival.xhtml with the large image on the left, the text with links on the right, and the thumbnails on the bottom?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    This is a demo I posted to a similar request in another thread. Maybe use it as a guide to get you started.

    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">
                #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 thumbMaxWidth = 100;
                var thumbMaxHeight = 100;
                //preload the images
                var picData = [
                    ['num1.jpg','description 1'],
                    ['num2.jpg','description 2'],
                    ['num3.jpg','description 3'],
                    ['num4.jpg','description 4'],
                    ['num5.jpg','description 5']
                ];
                picO = new Array();
                for(i=0; i < picData.length; i++){
                    picO[i] = new Image();
                    picO[i].src = picData[i][0];
                }
                var fadeTimer;
                function showEnlargement(picNum){
                    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(){
                    //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);
                    }
                    enlargeContainerO = document.getElementById('enlargeContainer');
                    imgEnlargeO = document.getElementById('imgEnlarge');
                    descContainerO = document.getElementById('descContainer');
                    //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>
            <div id="enlargeContainer">
                <div id="imgEnlargeContainer">
                    <img id="imgEnlarge" src="" alt="" />
                </div>
                <div id="descContainer"></div>
            </div>
            <ul id="ulThumbs"></ul>
        </body>
    </html>
    and this demo slides divs from left to right. The 2 demos could be blended to produce the effect in your link.
    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">
                body {
                    position: relative
                }
                #main {
                    overflow: hidden;
                    border: 10px solid black;
                    color: black;
                    text-align: center;
                    position: absolute; top: 30px; left: 50px;
                    background-color: white
                }
                #enlargeCont {
                    display: none;
                    position: absolute;
                    top: 100px;
                    left: 300px
                }
            </style>
            <script type="text/javascript">
                var thumbWidth = 150;   //in pixels
                var thumbHeight = 150;
                var picPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic6.jpg'];
    
                //preload the images
                var numPics = picPaths.length;
                var picO = new Array();
                for(var i=0; i < numPics; i=i+1) {
                    picO[i] = new Image();
                    picO[i].src = picPaths[i];
                }
                //assign the pics to their containers
                window.onload=function() {
                    //first set the thumbnails' container width and height
                    document.getElementById("main").style.width = thumbWidth+'px';
                    document.getElementById("main").style.height = thumbHeight+'px';
                    //now create the thumbnails
                    for(var i=0; i < numPics; i=i+1) {
                        //create a div for the thumbnail
                        var imgDiv = document.createElement("div");
                        imgDiv.setAttribute("id", 'div'+i);
                        imgDiv.style.display = 'none';
                        imgDiv.style.position = 'absolute';
                        imgDiv.style.top = thumbHeight+'px';
                        imgDiv.style.left = '0px';
                        //create the thumbnail img element and set its attributes
                        var imgElem = document.createElement("img");
                        imgElem.setAttribute("src", picO[i].src);
                        imgElem.setAttribute("alt", '');
                        imgElem.setAttribute("title", 'Click to see enlargement');
                        var newDims = calcNewDimensions(picO[i].width, picO[i].height, thumbWidth, thumbHeight);
                        imgElem.src = picO[i].src;
                        imgElem.width = newDims['width'];
                        imgElem.height = newDims['height'];
                        //create onclick to display the enlargement
                        imgElem.onclick=function() {
                            document.getElementById("imgEnlarge").src = this.src;
                            document.getElementById("enlargeCont").style.display = 'block';
                        }
                        //append the new elements to their parents
                        imgDiv.appendChild(imgElem);
                        document.getElementById("main").appendChild(imgDiv);
                    }
                    //start the sliding images
                    swapDiv(1);
                }
                //section to control the sliding images
                var curDiv = 0;
                var divSlide;
                var divId;
                var curLeft = -thumbWidth;
                var zedIndex = 0;
                var pauser;
                function swapDiv(dir) {
                    divId = "div"+curDiv;
                    zedIndex = zedIndex + 100;
                    curLeft = curLeft * dir;
                    document.getElementById(divId).style.display = 'block';
                    divSlide = setInterval(function() {slideDiv(dir)},30);
                }
                function slideDiv(dir) {
                    document.getElementById(divId).style.zIndex = zedIndex; //this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through
                    document.getElementById(divId).style.top = 0+"px"; //this line has to be here and not in swapDiv() to stop flickering if thumbs have different heights
                    curLeft = curLeft + (1*dir);
                    if(dir == 1 && curLeft > 0)   {  //we have scrolled all the way to the right
                        clearInterval(divSlide);
                        clearTimeout(pauser);
                        curDiv = curDiv + 1;
                        if(curDiv > numPics-1) curDiv = 0;
                        curLeft = -thumbWidth * dir;
                        pauser = setTimeout(function() {swapDiv(dir)},2000);
                    } else if (dir == -1 && curLeft < 0) { //we have scrolled all the way to the left
                        clearInterval(divSlide);
                        clearTimeout(pauser);
                        curDiv = curDiv + 1;
                        if(curDiv > numPics-1) curDiv = 0;
                        curLeft = thumbWidth * dir;
                        pauser = setTimeout(function() {swapDiv(dir)},2000);
                    } else {  //keep scrolling to the right
                        document.getElementById(divId).style.left = curLeft+"px";
                    }
                }
                function calcNewDimensions(width, height, maxWidth, maxHeight){
                    newDims = new Array();
                    //scaling factors
                    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>
            <div id="main">
                <!-- **************************************************************
                    The sliding  images are created dynamically and placed  in here
                    ***************************************************************-->
            </div>
            <div id="enlargeCont">
                <img id="imgEnlarge" src="" alt="" />
                <div>
                    <button onclick="this.parentNode.parentNode.style.display='none';">Close enlargement</button>
                </div>
            </div>
        </body>
    </html>

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    53
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Do you have any pages online that might show these two in action (though separate)?

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    I don't have them online, but if you would like to see what they do all you need to do is copy and paste each demo into a separate html file and run them locally on your pc.

    Each demo has its own picdata/picPaths array. Replace the image file names in those arrays with any images of your own.

  • Users who have thanked bullant for this post:

    pcproff (04-02-2011)


  •  

    Posting Permissions

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