Make your images and text fade!

  • 4
  • Idea
  • Updated 5 years ago
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Outdated thread

Yola Code Site has added some new scripts for images and text faders. You can find these under our new category called "Fading Elements". We also added one more fading slideshow under the slideshow category called "Image Swap 3". Please read the rules before grabbing the codes! I hope you enjoy them!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
  • hoping you like them!

Posted 10 years ago

  • 4
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Just wanted to let people know about this =)
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Thanks Littleus :)
Photo of Angie

Angie

  • 9 Posts
  • 0 Reply Likes
Great Idea ~ just what I have been looking to use.

But, which parts of the code do I need to alter to make it work to my photos.

I am having some difficulty getting the code to point to my pix.

Thanks.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
You need to change the URL of the images.
Once your images are in your filemanager you can point to them.
i.e. resources/filename.jpg

Which code exactly are you using?
Photo of Angie

Angie

  • 9 Posts
  • 0 Reply Likes
The code was from the Yola test site from Littleus.

I have tried to alter the code ie resources/filename.jpg - but I cannot get it to work

Do you want me to post the whole code ~ it is 3 pages
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
no, there are 4 fading elements on yolacodes, just tell me which 1 it is.
Photo of Angie

Angie

  • 9 Posts
  • 0 Reply Likes
Thx.

It is the "Image Swap 3" fading element.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--
Ok this is an example image that littleus uses.

['http://yolacodes.yolasite.com/resourc... example fades the image and its relevant text.'],

Yours should read like this (prsuming your images are in the first main folder of your filemanager)

['http://YOURSITE.yolasite.com/resource... example fades the image and its relevant text.'],

-->

As you link the image by its full URL you will have to publish your site to see it work.

Let me know if this is still not working.
Photo of Angie

Angie

  • 9 Posts
  • 0 Reply Likes
OK

Thank you ~ I will give it a try.
Photo of Angie

Angie

  • 9 Posts
  • 0 Reply Likes
I still have a problem: the first part of the code: 'http://YOURSITE.yolasite.com/resources
I have only the web site url (which I can give you) of xxx.com ~ I do not have the yolasite.com

I do have my images held in the file manager.

Thx, Angie.
ps: thank you for helping
Photo of Angie

Angie

  • 9 Posts
  • 0 Reply Likes
Hi Duke.

Unfortunately I am still having a problem. I cannot seem to get the line correct to point to my photos.

There is no url properties box for the pix other than resources/xxx.jpg

Do you have any advice please ?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hey Angie

I see that you're trying to use the Image Swap 3? I'd be happy to help you out. Do you think you can email me using the contact form on the Yola Code site?

@Duke, thanks for helping out! =)
Photo of Angie

Angie

  • 9 Posts
  • 0 Reply Likes
Hi Littleus.

I have just emailed via the 'contact administrator' form on the Code Site. Is that correct
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
yep... perfect Angie. Thanks.. I'll respond to you there.
Photo of Angie

Angie

  • 9 Posts
  • 0 Reply Likes
Sorry to be a pain ~ but where ?

I sent the email from the 'Need help' drop down, and I do not know how I will be in contact with you.

Sorry
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Angie... I received your email... I have sent you a reply to your email address that you provided.
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Hi,

Am a bit new to this so apologies if the question is a bit green...

I am trying to apply fading images to my Yola site and have tried following the above directions but with no success... Would you be able to mark out which sections of the code are to be inserted into a 'HTML' widget and which to a 'Text' widget? Unless this is completely different from installing Google activation scripts...

Please...help.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello Adrian

I would like to help you with this if I can. Can you please post your page URL so that I can take a look at what you have done? Thanks!
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Hi Sanja,

Here is my link...
http://sitebuilder.yola.com/sites/S3/...

Thanks for the help!
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Apologies... mistakenly pasted the image URL... below is the correct link:
http://sitebuilder.yola.com/sites/S3/...
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi AdrianLim

Which Fading script are you trying to use and for which element on your site?
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Image Swap 3
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Thanks AdrianLim

However, I'm still not clear for which element on your site you're trying to add this to?

I also have to be honest that the Image Swap 3 is not always the best behaved script as it sometimes jumps around. You have such a great professional looking site and I'd hate to have that marred by inconsistent behaviour with this script. I would be happy to assist you with another code though if you wish!
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Thanks for the feedback Sanja! Which would you recommend using?
Its the center image that I want to fade...TePai_Imagewall.jpg
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi AdrianLim

Are you wanting to simply wanting to fade your center image or have it fade to a different picture?
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Cross-fading between 3 different images that I have created.
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Hi Sanja, had a look at the link and came to the very interesting yola code and test sites. However i feel a little lost (and silly!). Let's say I'd like to try the ultimate slideshow. I can't see any code on the code site, neither do i see an example on the test site so i could have a look with firebug or something. I haven't tried logging in yet as i can't see anywhere if there is already anyone else logged in...Has the functioning of these sites been changed over the last 4 years?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Saskia,

Here is the code specifically for the slide show on the site. This code may be pulled down very quickly as displaying it here may be contravening the copyright agreement. To get the code you can go to Dynamic Drive::Ultimate Fade-in slideshow (v2.4) and copy it from there legally.



<script type="text/javascript">// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

</script>

<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/resources/Littleus/big/Desert Landscape.jpg", "", ""] //plain image syntax
fadeimages[1]=["http://yolacodes.yolasite.com/resources/Littleus/big/Garden.jpg", "", ""] //plain image syntax
fadeimages[2]=["http://yolacodes.yolasite.com/resources/Littleus/big/Humpback Whale.jpg", "", ""] //plain image syntax
fadeimages[3]=["http://yolacodes.yolasite.com/resources/Littleus/big/Tree.jpg", "", ""] //plain image syntax
fadeimages[4]=["http://yolacodes.yolasite.com/resources/Littleus/big/Dock.jpg", "", ""] //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>
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Thank you Gop! A very interesting url you provided as well. Would you know if the codes provided there are compatible with Yola? Or does this depend on which feature id like to use? And also, would you be able to tell me how to use the Yola code and test site? Where do i login? Where do i find the codes? Cheers!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The test site has been removed.

The DD codes generally will work in Yola built sites
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Thanks Gop! :)
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Thanks for that...I have inserted the code, or at least I think I have. And the images are fading in and out fine...
Would you be able to help me with adjusting the size of the image as it crops it... Tried to find the width parameter but no indication of letting me adjust it...
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
I'll be happy to take a look and I'll get back to you in a bit :) Thanks for your continued patience!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello AdrianLim

I have fixed this up for you. Can you please take a look and let me know if you have any further issues with this?
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Thanks for that...unfortuately I forgot to reload my browser when I tried to insert another image...would you be able to do that piece of magic that you did before? :)

Also I am trying to remove the Yola icon on the footer area.. I have previously done so by clicking on it and paying the $9.50 to remove it but now its telling me to upgrade to Yola Silver, which I can't afford as tempting as it may be...please advise if this is still possible?

Thanks!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello AdrianLiim

I have fixed up your slideshow. Just as a suggestion, whenever you use HTML codes like that one - it is probably better to put in an HTML Widget.

As for the Yola Link, we have discontinued selling the Yola Link Removal as an ala carte product and I would like to explain why.

The main reason we removed this single product feature is that very few customers had an interest in purchasing it as such, which made it no longer sustainable for us as a business to offer this product on its own, we have therefore included it in our Yola Silver package. If you upgrade to Yola Silver, it will automatically be removed for all the sites in your account.

Please note that in order to honor our commitment to customers who have already purchased this feature, they will get to keep it forever. In other words, if you have all ready purchased the Yola Link Removal, there will be no renewal fee and you will not be forced to upgrade to Yola Silver to keep this feature if you have already purchased it. Also, if you have already purchased Yola Link Removal, or any other premium feature, you can upgrade to Yola Silver at a 30% discount!

I hope this helps to explain why there was a change in our product offerings. For more information on Yola Silver please see: Yola Packages.
Photo of AdrianLim

AdrianLim

  • 10 Posts
  • 0 Reply Likes
Thank you so much for all your help Sanja! I am able to see where you can change the height and width vales. Figured out how to incorporate it into the design as well....

Again, thank you so much for all your assistance regarding this matter!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
My pleasure! That is what we are here for. If you need anything else, please let us know.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I've noticed some of those options, the image changes... with learning this other language. I can use basic html and create the same effect by using...

<!--

<img src="picture1.jpg" onmouseover="this.src='picture2.jpg';" />

-->

will this also work in Yola? Much less complex I would think!?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello Donald - that will also work but in the case above, he is use more than 2 images and he wanted it to run automatically like a slideshow. The code you suggested - it will only work when you mouseover.