Advanced Search

Results 1 to 5 of 5

Thread: Help with Swiss Army slideshow

  1. #1
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with Swiss Army slideshow

    1) Script Title: Swiss Army Image Slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm

    3) Describe problem: I am trying to link urls to the images but it refuses to work even though I have followed the example code? Im using IE 7 and Mozilla 3.6.8 on Windows XP Operating system. I can hyperlink the caption but what I'm really after is to hyperlink the image. The changes are made through a CMS but here is the link to the version without image links. http://www.lib.monash.edu.au/

    var slides=[];

    /*** Slide show 1 ***/
    //slides[0] = ["/assets/promo-homepage/buzz-promo.jpg", "blah", "http://www.dynamicdrive.com"];


    /*** Slide show 2 ***/
    slides[1] = ["/assets/promo-homepage/quest-promo.jpg", "<p><a href='http://www.lib.monash.edu.au/learning-objects/e-modules/matheson-arts-orientation/emod-matheson-arts-orientation-2010.htm'>Take the online orientation module<\/a><\/p>", "Find books for assignment", "e-learning"];

    /*** extra configurations ***/
    slides.usealt=1;
    slides.usetitle=1;

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,706
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    You are using an altered version of the script. I don't recognize it. I have made several modified versions of the script for various reasons, but all have preserved the original functionality. The version you are using doesn't have the ability to link the image.

    I'd ordinarily suggest reverting to the original version, or using the updated version presented here:

    http://www.dynamicdrive.com/forums/blog.php?b=18

    Either of these versions may be used to link the image via the the third field for a given slide entry (all fields after the caption are optional):

    Code:
    slides[0] = ["1_side.jpg", "some caption", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
    However, your version already has a number of customizations, some not related to this feature. At least some of these (customizations for the image buttons) are unnecessary to achieve what you have because they were already available as options and/or can be achieved utilizing style hooks. Your version has hard coded these.

    But the customizations for a separate title, caption, and alt for each image are not available in the original or the update I linked to above. As I say, the way these were done in your version has removed the ability to link the image.

    Your version has replaced:

    Code:
    inter_slide.prototype.populateslide=function(picobj, picidx){
    if(document.getElementsByTagName){
    if(picobj.getElementsByTagName('a')[0]&&picobj.getElementsByTagName('a')[0].onclick)
    picobj.getElementsByTagName('a')[0].onclick=null;
    if(picobj.getElementsByTagName('img')[0]&&picobj.getElementsByTagName('img')[0].onload)
    picobj.getElementsByTagName('img')[0].onload=null;
    }
    picobj.style.backgroundColor=this.imgs[picidx].fadecolor? this.imgs[picidx].fadecolor : this.fadecolor? this.fadecolor : 'white';
    var slideHTML='<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td width="100%" height="100%" align="center" valign="middle" style="background:transparent none;">'
    if (this.imgs[picidx][2]){ //if associated link exists for img
    var specs=this.imgs[picidx][4]? ", '"+this.imgs[picidx][4]+"'" : this.specs? ", '"+this.specs+"'" : '';
    slideHTML+='<a href="'+this.imgs[picidx][2]+'"'+(this.imgs[picidx][3]? ' target="'+this.imgs[picidx][3]+'"' : this.target? ' target="'+this.target+'"' : '')+' onclick="'+(this.onclick? this.onclick : 'window.open(this.href, (this.target? this.target : \'_self\')'+specs+');return false;')+'">'
    }
    slideHTML+='<img id="theimg'+picidx+'_'+this.issid+'" src="'+(this.loadimgidx[picidx]&&typeof this.loadimgidx[picidx].complete=='boolean'&&this.loadimgidx[picidx].complete? this.loadimgidx[picidx].src : this.imgs[picidx][0])+'" alt="'+(this.ualt? this.imgs[picidx][1] : 'Slide Show Image')+'" title="'+(this.utit? this.imgs[picidx][1] : '')+'" '+(this.imbcolor&&!this.imgs[picidx].noborder? 'style="border:'+this.imgborder+'px '+(this.imbstyle? this.imbstyle : 'solid')+' '+this.imbcolor+';"' : 'border="'+(this.imgs[picidx].noborder? '0' : this.imgborder)+'"')+(!this.width||!this.height? ' onload="iss['+this.issid+'].imgload(this);"' : '')+'>'
    if (this.imgs[picidx][2]) //if associated link exists for img
    slideHTML+='<\/a>'
    slideHTML+='<\/td><\/tr><\/table>'
    picobj.innerHTML=slideHTML
    }
    with:

    Code:
    inter_slide.prototype.populateslide=function(picobj, picidx)
    {
    	if(document.getElementsByTagName){
    	if(picobj.getElementsByTagName('a')[0]&&picobj.getElementsByTagName('a')[0].onclick)
    	picobj.getElementsByTagName('a')[0].onclick=null;
    	if(picobj.getElementsByTagName('img')[0]&&picobj.getElementsByTagName('img')[0].onload)
    	picobj.getElementsByTagName('img')[0].onload=null;
    	}
    	picobj.style.backgroundColor=this.imgs[picidx].fadecolor? this.imgs[picidx].fadecolor : this.fadecolor? this.fadecolor : 'white';
    	var slideHTML='<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td width="100%" height="100%" align="center" valign="middle" style="background:transparent none;">'
    	if (this.imgs[picidx][2]){ //if associated link exists for img
    		var specs=this.imgs[picidx][4]? ", '"+this.imgs[picidx][4]+"'" : this.specs? ", '"+this.specs+"'" : '';
    		
    		
    	}
    	slideHTML+='<img id="theimg'+picidx+'_'+this.issid+'" src="'+(this.loadimgidx[picidx]&&typeof this.loadimgidx[picidx].complete=='boolean'&&this.loadimgidx[picidx].complete? this.loadimgidx[picidx].src : this.imgs[picidx][0])+'" alt="'+(this.ualt? this.imgs[picidx][2] : 'Slide Show Image')+'" title="'+(this.utit? this.imgs[picidx][3] : '')+'" '+(this.imbcolor&&!this.imgs[picidx].noborder? 'style="border:'+this.imgborder+'px '+(this.imbstyle? this.imbstyle : 'solid')+' '+this.imbcolor+';"' : 'border="'+(this.imgs[picidx].noborder? '0' : this.imgborder)+'"')+(!this.width||!this.height? ' onload="iss['+this.issid+'].imgload(this);"' : '')+'>'
    	
    	if (this.imgs[picidx][2]) //if associated link exists for img
    	slideHTML+='<\/a>'
    	slideHTML+='<\/td><\/tr><\/table>'
    	picobj.innerHTML=slideHTML
    } //end of populate slide
    To keep the current customizations for separate title, caption and alt, and to add back the ability to link the image, the above could be changed to:

    Code:
    inter_slide.prototype.populateslide=function(picobj, picidx)
    {
    	if(document.getElementsByTagName){
    	if(picobj.getElementsByTagName('a')[0]&&picobj.getElementsByTagName('a')[0].onclick)
    	picobj.getElementsByTagName('a')[0].onclick=null;
    	if(picobj.getElementsByTagName('img')[0]&&picobj.getElementsByTagName('img')[0].onload)
    	picobj.getElementsByTagName('img')[0].onload=null;
    	}
    	picobj.style.backgroundColor=this.imgs[picidx].fadecolor? this.imgs[picidx].fadecolor : this.fadecolor? this.fadecolor : 'white';
    	var slideHTML='<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td width="100%" height="100%" align="center" valign="middle" style="background:transparent none;">'
    	if (this.imgs[picidx][4]){ //if associated link exists for img
    		var specs=this.imgs[picidx][6]? ", '"+this.imgs[picidx][6]+"'" : this.specs? ", '"+this.specs+"'" : '';
    slideHTML+='<a href="'+this.imgs[picidx][4]+'"'+(this.imgs[picidx][5]? ' target="'+this.imgs[picidx][5]+'"' : this.target? ' target="'+this.target+'"' : '')+' onclick="'+(this.onclick? this.onclick : 'window.open(this.href, (this.target? this.target : \'_self\')'+specs+');return false;')+'">'
    		
    	}
    	slideHTML+='<img id="theimg'+picidx+'_'+this.issid+'" src="'+(this.loadimgidx[picidx]&&typeof this.loadimgidx[picidx].complete=='boolean'&&this.loadimgidx[picidx].complete? this.loadimgidx[picidx].src : this.imgs[picidx][0])+'" alt="'+(this.ualt? this.imgs[picidx][2] : 'Slide Show Image')+'" title="'+(this.utit? this.imgs[picidx][3] : '')+'" '+(this.imbcolor&&!this.imgs[picidx].noborder? 'style="border:'+this.imgborder+'px '+(this.imbstyle? this.imbstyle : 'solid')+' '+this.imbcolor+';"' : 'border="'+(this.imgs[picidx].noborder? '0' : this.imgborder)+'"')+(!this.width||!this.height? ' onload="iss['+this.issid+'].imgload(this);"' : '')+'>'
    	
    	if (this.imgs[picidx][4]) //if associated link exists for img
    	slideHTML+='<\/a>'
    	slideHTML+='<\/td><\/tr><\/table>'
    	picobj.innerHTML=slideHTML
    } //end of populate slide
    Now, if you add an additional field, here and similar for the others (highlighted, scroll code block to see it):

    Code:
    slides[0] = ["/assets/promo-homepage/buzz-promo.jpg", "<p><a href='https://blogs.monash.edu/library/'>Keep up to date via the Library blog<\/a><\/p>", "The latest library news, resources", "Library blog", "https://blogs.monash.edu/library/"];
    the image will be linked. Optional target and specifications fields may follow the link field if desired.
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Brilliant! Thanks jscheuer1! Now that I think of it, I did make some changes to the javascript to customise the image controls about a year ago so it must of slipped my mind, anyway really appreciate what you have done....

    Keep up the good work


  4. #4
    Join Date
    Sep 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Configuring Preloaded images

    I have been racking my brain trying to figure out what I am doing wrong to make make image controls show up instead of the default image controls. Can someone help me out PLEASE:

    <script type="text/javascript">

    //If using image buttons as controls, Set image buttons' image preload here true
    //(use false for no preloading and for when using no image buttons as controls):
    var preload_ctrl_images=true;

    //And configure the image buttons' images here:
    var previmg='images/left.jpg';
    var stopimg='images/stop.jpg';
    var playimg='images/play.jpg';
    var nextimg='images/right.jpg';

    var slides=[]; //FIRST SLIDESHOW
    //configure the below images and descriptions to your own.
    slides[0] = ["images/SSLoading.jpg", ""];
    slides[1] = ["images/Gumbrill1.jpg", ""];
    slides[2] = ["images/Gumbrill2.jpg", ""];
    slides[3] = ["images/payne/payne001.JPG", ""];
    slides[4] = ["images/payne/payne002.JPG", ""];
    slides[5] = ["images/payne/payne003.JPG", ""];
    slides[6] = ["images/payne/payne004.JPG", ""];
    slides[7] = ["images/mom/mom001.JPG", ""];
    slides[8] = ["images/mom/mom002.JPG", ""];
    slides[9] = ["images/mom/mom004.JPG", ""];
    slides[10] = ["images/mom/mom005.JPG", ""];
    slides[11] = ["images/mom/mom006.JPG", ""];
    slides[12] = ["images/mom/mom009.JPG", ""];
    slides[13] = ["images/mom/mom010.JPG", ""];
    slides[14] = ["images/mom/mom013.JPG", ""];
    slides[15] = ["images/mom/mom014.JPG", ""];

    slides.width=830; //use to set width of widest image if dimensions vary
    slides.height=450; //use to set height of tallest image if dimensions vary
    slides.nofade=1; //use for no fade-in, fade-out effect for this show
    slides.fadecolor='#f8f5ef' ;
    slides.imagecontrols=1;

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,706
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - 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
  •