Using HTML scripts seems impossible!

  • 2
  • Question
  • Updated 6 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

Hello!

I would like to add the Ultimate Fade-In Slideshow to my site.
I can really not figure out how any of you has made it! I am unable to edit the header section of the page, so how could i add the code?

For another solution I would be thankful!

Regards,
Luca Silva
Photo of lucasilva3010

lucasilva3010

  • 5 Posts
  • 0 Reply Likes

Posted 10 years ago

  • 2
Photo of James

James

  • 35 Posts
  • 2 Reply Likes
I'm having trouble with the Ultimate Fade-In Slideshow as well. I copied all the html from the yola code site and placed them above next each other as on the yola code site but nothing appears! Just two html boxes seemingly doing nothing.
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
<!--
Hey there both of you, could you please link the url of which the attempted slide show is on so we can see exactly what is happening. Just from experience and from what you are saying, it seems you didn't change the image path for the slide show. You need to change this part of the code:

fadeimages[0]=["http://yolacodes.yolasite.com/resourc... Landscape.jpg", "", ""] //plain image syntax
fadeimages[1]=["http://yolacodes.yolasite.com/resourc..., "", ""] //plain image syntax
fadeimages[2]=["http://yolacodes.yolasite.com/resourc... Whale.jpg", "", ""] //plain image syntax
fadeimages[3]=["http://yolacodes.yolasite.com/resourc..., "", ""] //plain image syntax
fadeimages[4]=["http://yolacodes.yolasite.com/resourc..., "", ""] //plain image syntax

Where it says "http://yolacodes.yolasite.com/resourc..." is where you need to change to your image. Make sure to change the extension name if your picture is not a jpeg!

Again a link to the page would be helpful :)
-->
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
Oh oh oh oh...what are talking about editing the head section of the page? From here, it just looks like javascript.
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
<!--
Not sure if this is bugging out the entire code but it's not helping any:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]=["http://www.palatinepublications.co.cc..., "", ""] //plain image syntax

It's your first image. You are missing a "/" in between your website and resources. You need to have ...publicatons.co.cc/resources/music_1.jpg"....

Look forward to seeing what happens! Remember to update your site every time you upload a picture!

Dan
-->
Photo of James

James

  • 35 Posts
  • 2 Reply Likes
Nothing happened.

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]=["http://www.palatinepublications.co.cc..., "", ""] //plain image syntax
fadeimages[1]=["http://www.palatinepublications.co.cc..., "", ""] //plain image syntax
fadeimages[2]=["http://www.palatinepublications.co.cc... Gradient.png", "", ""] //plain image syntax

var fadebgcolor="white"
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
I must run out for a couple hours, but will come back to you to help you.
Photo of lucasilva3010

lucasilva3010

  • 5 Posts
  • 0 Reply Likes
hey there!

here's the link. Slideshow should be just left from the text.
Its 2 html boxes.

content top box:

Photo of lucasilva3010

lucasilva3010

  • 5 Posts
  • 0 Reply Likes
well ... forgot the link: http://www.webcasino-reviews.com
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi lucasilva3010

Please try this:

Step 1: Paste the following code into your HTML widget. Please make sure that the code looks exactly same and the lines are broken up the same.

* replace all the image path to your own.

<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]=["http://yolacodes.yolasite.com/resourc... Landscape.jpg", "", ""] //plain image syntax
fadeimages[1]=["http://yolacodes.yolasite.com/resourc..., "", ""] //plain image syntax
fadeimages[2]=["http://yolacodes.yolasite.com/resourc... Whale.jpg", "", ""] //plain image syntax
fadeimages[3]=["http://yolacodes.yolasite.com/resourc..., "", ""] //plain image syntax
fadeimages[4]=["http://yolacodes.yolasite.com/resourc..., "", ""] //plain image syntax

var fadebgcolor="white"

////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){
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
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

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('<div id="master'+this.slideshowid+'" style="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>')
else
document.write('<div><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)
}
}

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+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

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()}, 100)
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+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

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>

Step 2: Drag over another HTML widget and paste in the following code:

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 400, 300, 0, 5000, 1)
</script>

Please let me know if you have any trouble with this.
Photo of peterbrendan

peterbrendan

  • 15 Posts
  • 0 Reply Likes
Not working for me here I'm afraid!
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
This script is over 4 years old. You might want to start a new thread if you need help with custom code.
Photo of lucasilva3010

lucasilva3010

  • 5 Posts
  • 0 Reply Likes
Hey!

Thanks for the answer!

Well.. I did everything like you said.
Still not working: www.webcasino-reviews.com

regards,
Luca
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi

There seems to be spaces between each line. Can you please remove the spacing? Remember it needs to look exactly the same as it is shown above. Codes can be quite particular. Give this a try and then we'll go from there.
Photo of lucasilva3010

lucasilva3010

  • 5 Posts
  • 0 Reply Likes
here you go... no spaces/breaks at all.
still not working! hmm...
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi

Now... unfortunately, you have removed spacing where there should be spacing :) Please refer to the code above to see exactly how it supposed to be laid out. Can you try one more time? If it's still not working, you can send me an email to support@yola.com ATTN: Sanja. I can try and see if I can get this going for you.
Photo of cmd ceramics

cmd ceramics

  • 87 Posts
  • 1 Reply Like
has anyone managed to get this working? im having the same problem
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello cmd ceramics,
Sanja is not currently online, however I am going to forward this to her to see if she is able to assist you with this. Thanks for your patience in the meantime.

Kind Regards,
Emmy
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello cmd ceramics,

I would be happy to assist you with this! Can you please share with me your site URL and the page where I can find this? Then, I'll take a look and see why it's not working for you.
Photo of cmd ceramics

cmd ceramics

  • 87 Posts
  • 1 Reply Like
Hi Sanja thanks for your help here's the page http://rgpropertymaintenance.yolasite...
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello,
Again, forwarding this to Sanja as she is not online right now :) Thanks for your patience.

Emmy
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello cmd ceramics,

Thanks for sharing your URL. I took a look and it appears that you may have already addressed the issue? Your slideshow is working well for me!. Can you please let me know if you're still having troubles with this? If so, please let me know what browser and version and I can investigate this further.
Photo of cmd ceramics

cmd ceramics

  • 87 Posts
  • 1 Reply Like
the code on the test site has some errors in the coding, I found the code here http://zakariarouf.wordpress.com/2008... and had no problems with it
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Thanks for bringing this to my attention. I will need to fix that up!
Photo of amegahed

amegahed

  • 10 Posts
  • 0 Reply Likes
Hello,

I followed these instructions and put the code as an HTML widget, it is working, bnut the whole image is not displayed and it is to the left. I'd like the whole image to show in the center. How do I do that?
www.sunnahpants.com

Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
There are a few ways to fix this.

The easiest is to click the alignment icon facility on the widget when you are in the HTML edit mode. Select the center alignment. There are some things that can over-ride this but it should be ok. let me know.

I noticed also that you have entered some Online Store CSS into your CSS over-rides and that won't work. You need to add such code into your Online Store CSS facility which is a separate area completely.

Chok di na khrawp.

Photo of amegahed

amegahed

  • 10 Posts
  • 0 Reply Likes
I see the center alignment facility on the widget, didn't notice it earlier. Thanks. I had to play with the width and height to get it center aligned as well.

What do you mean with the CSS over-rides. Should I add the photo slideshow in the CSS over-rides area?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
No nothing to do with the photo slideshow. It's the online store.