Make the fade show image a link

[kamrankhan]

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

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..

<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>

[jscheuer1]

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

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:

////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):

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.