Fast and easy way to create and maintain a slideshow in Yola

  • 1
  • Question
  • Updated 6 years ago
Right now I am using slideful.com to create slideshows for a site I am working on. I find it a pain when I am asked to add new photos to the slideshow. I have to go into slideful.com and it seems recreate the slideshow from scratch every time.

I am looking for a quicker way to create and maintain a slideshow in Yola without having to create the wheel every time.

Would I be able to use this on my web site? This is along the lines of what I am after. I want to be able to create and maintain my slideshow from within Yola and I think this code should work. I just need to know how to implement it.

http://www.angelfire.com/nm/thehtmlso...
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • hopeful that I can find a workable solution...

Posted 6 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Randy

Adding a Yola Slideshow Widget to Yola Sitebuilder is high up on our agenda for this year.

Until it is released, we can only suggest to use third-party providers like slideful.com to add a slideshow to your Yola website. When you sign up for a free account with slideful.com, your slideshows will all be saved in your slideful account. You will be shown a list where you can click to edit your existing slideshows without uploading the same pictures again. The programme will take you through every step without the first one (picture upload), and you'll be able to make your edits and save. However, slideful only allows you to maintain your slideshow within your slideful account. All you need to do after editing is to copy the code provided and replace your old code in your HTML Widget on Yola.

I've tested the code provided on the page you linked to, and the good news is, this code works with Yola!

Please follow the instructions given on that page with the following modifications:
  • First choose the pictures you want to use for your slideshow on your computer and make sure they all have the same dimensions, e.g. 300x225px.

  • Now go to your Yola File Manager. You may want to create a separate folder for your slideshow pictures, let's do that and name it "slideshow".

  • Upload the desired pictures from your computer into the "slideshow" folder of your File Manager.

  • Copy the first code snippet from that page you linked to. You won't need to add it to the head section of your Yola website. You can just drag and drop an HTML Widget to the very top of your page and paste the code there.

  • Edit the blue code sections by using URLs like this: resources/slideshow/yourimagename.jpg. The file name is case-sensitive. Make sure to add the correct file type (in this example it's .jpg).

  • Once done, save, and drag another HTML Widget below the first one onto your page.

  • Copy the second code section (which is supposed to be in the body area of your page), and paste it into your second HTML Widget. Replace the first blue code section by the URL of your first picture, like resources/slideshow/yourfirstimage.jpg.

  • Make your edits of the other blue sections as advised. If your picture dimensions are 300x225px, enter 300 for width and 225 for height.

  • Save your edits.

Done! Please check in Preview if your slideshow is working. Let me know if it's not, and you'd need more assistance with that.

If you want to see a slideshow in action made with this code, please see this example website.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks so much! Your instructions were clear and to the point. The slideshow works fine, and what I love is that I can make all of my slideshow changes without having to open another page or web site.

Now, let's say I want to add stuff like rounded corners etc... How would I modify the code?

This is the code I am using:

<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="resources/cover_cegeps.jpg"
var image2=new Image()
image2.src="resources/jupiter.jpg"
var image3=new Image()
image3.src="resources/canon.jpg"
var image4=new Image()
image4.src="resources/cover_ifonly.jpg"
//-->
</script>



<img src="resources/cover_jupiter.jpg" name="slide" width=150 height=220>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<4)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",9500)
}
slideit()
//-->
</script>
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The first part won't change so I won't reproduce it.

I've added the CSS which hopefully will set it up. it needs to have a background colour to work so I have set that as #CCC. This can be set to something else. The radius of the curves has been set to 1 em and also can be changed.

internal CSS

<style type="text/css">
.boxbg { background-color:#ccc; }
.all-round {
border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
}
</style>


HTML
Here the existing HTML has been added to a DIV class:

<div class="boxbg all-round">
<img src="resources/cover_jupiter.jpg" name="slide" width=150 height=220>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<4)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",9500)
}
slideit()
//-->
</script></div>
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Gop!

So I add the Internal CSS code to the first HTML widget on my page and the HTML to the second HTML widget replacing what I already have there?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You will have 3 HTML widgets related to this slideshow now.

First is your js script
Second is the internal CSS
Third the HTML
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks!

So the only widgets that need modifying would be the newly created Internal CSS widget and replacing my current HTML widget content with the one you described in your previous post. The js script widget remains untouched?