hey i want to add slide show to my website but it is not showing why

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Here is the code of slide show

<!-- BEGINNING OF THE CODE FOR THE CSS3-ROTATION-AND-ZOOM-SLIDE-SHOW-->

<!----------------------------------------->
<!-- TEXT-STYLE-CONFIGURATION STARTS HERE -->
<!----------------------------------------->
<!-- Set the text-style within ".textboxstyle" -->
<!-- Set the backgroundcolor within ".textboxbackgroundstyle" -->
<!-- "-moz-" is required for Firefox. "-webkit-" is required for Safari and Chrome -->
<style>
.textboxstyle {
font-family:Arial;
font-size:10pt;
color:white;
text-align:center;
vertical-align:middle;
}

.textboxbackgroundstyle {
background-color:black;
padding:0px;
}
</style>
<!----------------------------------------->
<!-- TEXT-STYLE-CONFIGURATION ENDS HERE -->
<!----------------------------------------->

<style>
.imgbox {
float:left;
position:absolute;
top:0px;
left:0px;
display:block;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
</style>

<script>

// CREDITS:
// CSS3-Slideshow with rotation and zoom effect effect
// by Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// 08/17/2010

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.fabulant.com on the webpage
// where this script will be running.

// CONFIGURATION:
// Go to http://www.fabulant.com and get the original code
// with step-by-step instructions and copy-and-paste installation.

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

// Set the elements of your slides. Each block below contains the URL of your images as well as the corresponding messages and links. In this case the pictures are in the same directory as the HTML-file. Add as many slides as you like. Just follow the rules below:

// { Each block starts with this brackets
// imgsrc : "../the path/or/url/to/your/image.jpg",
// message : "the comment at the bottom of the slide",
// linkto : "http://the-url-of-your-link.com" This line does not end with a comma
//}, Each block ends with a bracket and comma. ATTENTION: The very last block does not end with a comma!!!

var slide= [
{
imgsrc : "sample1.jpg",
message : "That's the smile of Mona Lisa",
linkto : "http://www.fabulant.com"
},

{
imgsrc : "sample2.jpg",
message : "Lena looks like an angel",
linkto : "http://www.fabulant.com"
},

{
imgsrc: "sample3.jpg",
message : "Most women are waterproof",
linkto : "http://www.fabulant.com"
},

{
imgsrc : "sample4.jpg",
message : "Beauty has no age",
linkto : "http://www.fabulant.com"
}
]

// Set the target of the your links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"

// Set the width and height of your images (pixels)
var imgwidth=200
var imgheight=150

// Set the height of your textbox (pixels)
var textheight=20

// Set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60

// Set the pause (standstill) between the rotations (seconds)
var pause=2

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////

// do not edit below this line
var maxrotations=2
var step=36
var i_imgwidth=0
var i_imgsrc=0
var i=0
var maxdegree=maxrotations*360
pause*=1000

var imgpreload=new Array()
for (ii=0;ii<=slide.length-1;ii++) {
imgpreload[ii]=new Image()
imgpreload[ii].src=slide[ii].imgsrc
}

function enlarge() {
i+=step
i_imgwidth+=imgwidth/(360*maxrotations/step)
if (i_imgwidth>imgwidth) {
i_imgwidth=imgwidth
}
if (i<=maxdegree) {
document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
tmr=setTimeout("enlarge()",20)
}
else {
clearTimeout(tmr)
i=0
i_imgwidth=imgwidth
showmessage()
}
}

function showmessage() {
document.getElementById("textbox").innerHTML='<div class="textboxbackgroundstyle">'+slide[i_imgsrc].message+'</div>'
tmr=setTimeout("hidemessage()",pause)
}

function hidemessage() {
document.getElementById("textbox").innerHTML=""
shrink()
}

function shrink() {
i+=step
i_imgwidth-=imgwidth/(360*maxrotations/step)
if (i_imgwidth<1) {
i_imgwidth=1
}
if (i<=maxdegree) {
document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
tmr=setTimeout("shrink()",20)
}
else {
clearTimeout(tmr)
i_imgsrc++
if (i_imgsrc>slide.length-1) {
i_imgsrc=0
}
i=0
i_imgwidth=0
tmr=setTimeout("enlarge()",500)
}
}

document.write("<div id='roof' style='position:relative;width:"+imgwidth+"px;height:"+imgheight+"px;'>")
document.write("<div class='imgbox' id='dt' style='width:"+imgwidth+"px;height:"+imgheight+"px;top:0px;left:0px;'></div>")
document.write("<div id='text' style='position:absolute;width:"+imgwidth+"px;height:"+textheight+"px;top:"+(imgheight-textheight)+"px;left:0px;filter:alpha(opacity="+opacitystrength+");opacity:"+(opacitystrength/100)+";'><table width="+imgwidth+" height="+textheight+"><tr><td id='textbox' class='textboxstyle'></td></tr></table></div>")

document.write("</div>")

window.onload=enlarge
</script>

<!-- END OF THE CODE FOR THE CSS3-ROTATION-AND-ZOOM-SLIDESHOW-->



I got this from
http://www.fabulant.com/downloadcente...
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes

Posted 7 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello,

It appears that you have not changed the image sources with that of your own pictures. As I am not developed in HTML, I will be asking a member of our HTML team to take a further peek into this with you. We also have a few community members who know quite a lot in this regard. Thanks for your patience!
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes
thanks Brianna
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Safi,

Thanks for your patience. Brianna is correct. You need to replace the image files to your own.

Locate in the code "imgsrc" and insert beside it, your image path to your picture. It would look something like this: resources/yourimage.jpg

If you still have trouble with this, please post your URL and the page where we can see this set-up. We'll be happy to help further.
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes
can i use images like that resources/yourimage.gif
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
If the name of your file is yourimage.gif then yes you can use that. Hope that answers your question.
Photo of filipabo

filipabo

  • 5 Posts
  • 0 Reply Likes
Hello. I have the same problem. I want to add a slide show that I made in slide to my yola website and it doesn't work. Honestly...I am not good at this and I tried to understand what you wrote above but was imposible. I think my code is this: http://www.slide.com/r/rtpP5bqr6j_iUz...

Can you help me??

Many thanks,

Filipa.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Filipa,

You are using a bit different of a method to add your slideshow. While clicking on the link you have provided, I am finding the embed code you will want to use. Please click on the word 'embed' and copy the code. Here is a visualization of where that is:



After you have the embed code, you will use the HTML widget to embed the code to your site.

Here's how to add HTML to your site using the HTML Widget:

1. Drag and drop an HTML Widget from the sidebar on the right onto your page (the icon for this is a blue sphere).
2. An HTML editor will open up that will allow you to write or paste your code (use right-click > paste or Ctrl-V to paste).
3. When you are done, click "Save" and you will see the way that the HTML displays on your page

I hope this is helpful to you, Filipa. Please let us know if you need further assistance.
Photo of filipabo

filipabo

  • 5 Posts
  • 0 Reply Likes
Thank you Brianna!! It worked. The only problem now is that I don't like to see that slide show on my webiste, because it is full of slide advertising, and instead of looking my website it looks slide website. Is there any way to take the slide publicity from there? Or do you know any other website where I can do a slide show, but when I add it to my yola doens't come with publicity?

Do you understand?

Thanks,

Fiipa.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Filipabo,

I would suggest that you use a WOW SLider because they do not add any credits.

Their website is here... http://www.wowslider.com/
An example of it in use is here... http://www.shamrockandrambler.co.uk

And I have created a guide on how to create a Visual Lightbox gallery. Visual Lightbox is very similar to WOW Slider and is made by the same company. The settings may be a bit different but it is straightforward and simple to follow. Here is the guide... http://www.mangopearmedia.com/resourc...

If you need any more help, please do not hesitate to reply,

Kind Regards,
Andi
Photo of filipabo

filipabo

  • 5 Posts
  • 0 Reply Likes
I was looking for a free website...

Do you know any?

Or can I do it in power point? Will it work in my yola?

Thanks,

Filipa.