Results 1 to 2 of 2

Thread: Make the fade show image a link

  1. #1
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Make the fade show image a link

    Hi to all

    i am using Ultimate Fade-In Slideshow (v1.51).

    the image which i show in slid slideshow come dynamically

    i want to make link every image.Basically every image belong to a product i want to link that image to that product detail page.

    I am posting code but this code will not run their;

    I am getting the product id and images name then i am putting the product id and images in array;

    slide show is working but where this code is i want to make a link

    PHP Code:
    document.write('<a href="<?=DX_URL::convert(WWW_ROOT."index/productDetail/product_id/")?>"'+productid+'>
    but the image which show should show the product id also to make the link successful..
    PHP Code:
    <script language="javascript" type="text/javascript">

    var fadeimages=new Array()

    var image_names = new Array();
    var image_names2 = new Array();
    var product_id = new Array();
    <? if($productRecommanded)
    {
    foreach(
    $productRecommanded as $key=>$recommand)
    {
    //echo "<p><pre>";var_export($productRecommanded); echo "</pre></p>";
    ?>
    fadeimages[<?=$key?>]=["<?=IMAGES_WEB.'products/'.$recommand[TProducts::PROD_IMAGE_SMALL]?>", "", ""] //image with link and target syntax
    image_names[<?=$key?>] = "<?=$recommand[TProducts::PRODUCT_NAME]?>";
    product_id[<?=$key?>] = "<?=$recommand[TProducts::PRODUCT_ID]?>";
    <? 
    }
    }

    ?>



    var fadeimages2=new Array();
    var limit = fadeimages.length-2;
    var y=0;
    for(i=limit;i>=0;i--)
    {
        fadeimages2[y]=fadeimages[i];
        image_names2[y]=image_names[i];    
        y++;
    }
    fadeimages2[y]=fadeimages[0];
    //fadeimages2[y+1]=fadeimages[1];
    image_names2[y] = image_names[0];
    //image_names2[y+1] = image_names[1];    
    //==================================================





    var fadebgcolor="white";

    //alert(image_names + "\n" + image_names2);
    //alert(image_names + "\n" + image_names2);
    ////NO need to edit beyond here/////////////
     
    var fadearray=new Array() //array to cache fadeshow instances
    var fadeclear=new Array() //array to cache corresponding clearinterval pointers
     
    var dom=(document.getElementById) //modern dom browsers
    var iebrowser=document.all
     
    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder,image_names,img_tag,product_id){
    this.pausecheck=pause
    this.mouseovercheck=0
    this.delay=delay
    this.degree=10 //initial opacity degree (10%)
    this.curimageindex=0
    this.nextimageindex=1
    fadearray[fadearray.length]=this
    this.slideshowid=fadearray.length-1
    this.canvasbase="canvas"+this.slideshowid
    this.curcanvas=this.canvasbase+"_0"
    //if (typeof displayorder!="undefined")
    //theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
    this.theimages=theimages
    this.imageborder=parseInt(borderwidth)
    this.postimages=new Array(); //preload images

    this.image_names = image_names;

    ////Important
    this.product_id = product_id;
    ////important

    //this.image_names2 = image_names;
    //alert(this.product_id);
    this.img_tag = document.getElementById(img_tag);

    //alert(img_tag);
    for (p=0;p<theimages.length;p++)
    {
        this.postimages[p]=new Image();
        this.postimages[p].src=theimages[p][0];
        //this.postid[p]=product_id[p];
    }
     
    var fadewidth=fadewidth+this.imageborder*2
    var fadeheight=fadeheight+this.imageborder*2
     
    if (iebrowser&&dom||dom)
    {
     //if IE5+ or modern browsers (ie: Firefox)
    document.write('<a href="<?=DX_URL::convert(WWW_ROOT."index/productDetail/product_id/")?>"'+productid+'><div id="master'+this.slideshowid+'" style="border:1px solid red;position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div></a>')
    }
    else
    {
     document.write('<div style="border:2px solid red;"><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
    }
     
    if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
    this.startit()
    else{
    this.curimageindex++
    setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
    }

    }

    function fadepic(obj){
    if (obj.degree<100){
    obj.degree+=10
    if (obj.tempobj.filters&&obj.tempobj.filters[0]){
    if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
    obj.tempobj.filters[0].opacity=obj.degree
    else //else if IE5.5-
    obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
    }
    else if (obj.tempobj.style.MozOpacity)
    obj.tempobj.style.MozOpacity=obj.degree/101
    else if (obj.tempobj.style.KhtmlOpacity)
    obj.tempobj.style.KhtmlOpacity=obj.degree/100
    else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
    obj.tempobj.style.opacity=obj.degree/101
    }
    else
    {
        clearInterval(fadeclear[obj.slideshowid])
        obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
        obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
        obj.populateslide(obj.tempobj, obj.nextimageindex)
        obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
        setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay);
        //alert("fadearray["+obj.slideshowid+"].rotateimage()");
        //this.img_tag.innerHTML = this.image_names[picindex];
    }
    }

    fadeshow.prototype.populateslide=function(picobj, picindex)
    {

    var slideHTML=""
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">';
    slideHTML='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'0px">';
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>';
    picobj.innerHTML=slideHTML;
    //alert(slideHTML);
    //this.img_tag.innerHTML = this.image_names[picindex];
    //alert(this.image_names[picindex]);

    }
     
     
    fadeshow.prototype.rotateimage=function()
    {

        if (this.pausecheck==1) //if pause onMouseover enabled, cache object
        var cacheobj=this
        if (this.mouseovercheck==1)
        setTimeout(function(){cacheobj.rotateimage()}, 10)
        else if (iebrowser&&dom||dom)
        {
            this.resetit()
            var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
            crossobj.style.zIndex++
            fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",5)
            this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0";
            this.img_tag.innerHTML = this.image_names[this.curimageindex];
            //this.img_tag.outerHTML = '<a href="www.google.com"></a>';
        }
        else
        {
            var ns4imgobj=document.images['defaultslide'+this.slideshowid]
            ns4imgobj.src=this.postimages[this.curimageindex].src;
            //this.img_tag.innerHTML = this.image_names[this.curimageindex];
        }
        this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0;
        //this.img_tag.innerHTML = this.image_names[this.curimageindex];
        //alert(this.curimageindex);
    }
     
    fadeshow.prototype.resetit=function()
    {
        this.degree=10
        var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
        if (crossobj.filters&&crossobj.filters[0])
        {
            if (typeof crossobj.filters[0].opacity=="number") //if IE6+
                crossobj.filters(0).opacity=this.degree
            else //else if IE5.5-
                crossobj.style.filter="alpha(opacity="+this.degree+")"
        }
        else if (crossobj.style.MozOpacity)
            crossobj.style.MozOpacity=this.degree/101
        else if (crossobj.style.KhtmlOpacity)
            crossobj.style.KhtmlOpacity=this.degree/100
        else if (crossobj.style.opacity&&!crossobj.filters)
            crossobj.style.opacity=this.degree/101;
            
            
    }
     
     
    fadeshow.prototype.startit=function(){
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    this.populateslide(crossobj, this.curimageindex)
    if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
    var cacheobj=this
    var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
    crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
    crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
    }
    this.rotateimage()
    }



    </script>

                            <span id="test1"></span>
                        
                        
                                <script type="text/javascript">
        
        new fadeshow(fadeimages, 130, 113, 0, 5000, 0, "",image_names,"test1",product_id)
        
    </script>        
                            <!--    </a>-->
                            </div><!--suggested_items-->
                            <span id="test2"></span>
                            
                            <!--<a  href="<?=DX_URL::convert(WWW_ROOT."index/productDetail")?>">-->
                            <script type="text/javascript">
        
        new fadeshow(fadeimages2, 130, 113, 0, 5000, 0, "",image_names2,"test2",product_id)
        
        
    </script>
    Last edited by jscheuer1; 05-27-2008 at 02:13 PM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's not where the link is made. The link is made by the slide show here:

    Code:
    fadeshow.prototype.populateslide=function(picobj, picindex) 
    { 
    
    var slideHTML="" 
    if (this.theimages[picindex][1]!="") //if associated link exists for image 
    slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'; 
    slideHTML='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'0px">'; 
    if (this.theimages[picindex][1]!="") //if associated link exists for image 
    slideHTML+='</a>'; 
    picobj.innerHTML=slideHTML; 
    //alert(slideHTML); 
    //this.img_tag.innerHTML = this.image_names[picindex]; 
    //alert(this.image_names[picindex]); 
    
    }
    which I see you have hacked up a bit, you would do well to replace all of the original script code (including its in body calls) from this line on:

    Code:
    ////NO need to edit beyond here/////////////
    Now, where the link is made in the script is fine as it is in the original code. However, it gets its information from the array. So you want to use your PHP to construct the array in this format (something like):

    PHP Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[<?=PHP_token_for_numbers_0_to_whatever?>]=["<?=PHP_token_for_image_path_and_filename?>", "<?=PHP_token_for_the_href_of_the_link_for_this_image?>", ""]
    substitute the proper PHP syntax and tokens for the descriptive ones I've used.

    Once you get that together, assuming you've used the correct PHP to make the array(s), all the rest of the script code should be as it is on the demo page. If you need more help, setup a demo of the situation and gives us a link to it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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