Announcement

**Soundwave** · 03-30-2010, 02:45 PM

Re: How do i add a slideshow

You should be able to add one with BlueVoda if you're using Version 11.
In Version 10 you can create one using the Marquee features.
Or you just search for a "Conveyor belt slideshow" script at www.dynamicdrive.com, copy that code into a HTML box & adjust it to your needs.

**reiyamaha2003** · 04-04-2010, 08:23 AM

Re: How do i add a slideshow

Afther add marquee how can i add Images in the marquee ,And how can i up date to the new Bluevoda with out loosing my Files.

**Soundwave** · 04-04-2010, 04:24 PM

Re: How do i add a slideshow

I am still working with Version 10, however, I really don't think that you will lose any files when you upgrade to the new version!

About adding the slideshow using the Marquee features:
PIease note that I am not an expert at all, just learning by carefully reading through the Forum posts, so all I can do is tell you what I have learned to make it work for me!
With the help of this post I've figured out how to do it without even having to first insert the Marquee:

1) Before you get started, I recommend to properly size your images for a neat look & flow on the slideshow - use an external program for that and make them all the same height & width size, at least that's what I did.

2) Upload all these resized images to the "public_html" folder on the Server via FTP Manager in your BlueVoda program ("Tools" -> "FTP Manager")

3) Open Notepad and paste the following:

<marquee direction="left" height="400" scrolldelay="10" scrollamount="4" behavior="scroll" loop="0" style="background-color:#000000;" id="Marquee1"><img src="YOUR_1st_IMAGE.jpg" id="Image1" alt="" align="top" border="0" style="width:500px;height:375px;">
<img src="YOUR_2nd_IMAGE.jpg" id="Image2" alt="" align="top" border="0" style="width:500px;height:375px;">
<img src="YOUR_3rd_IMAGE.jpg" id="Image3" alt="" align="top" border="0" style="width:500px;height:375px;">
<img src="YOUR_4th_IMAGE.jpg" id="Image4" alt="" align="top" border="0" style="width:500px;height:375px;">
</marquee>

In the first line, set the desired HEIGHT (your images' height or a bit larger) and enter the proper BACKGROUND-COLOR code (in this case #000000 stands for black). What I usually do in order to find out the correct color codes, is open a blank page in BlueVoda, insert a text in the color I want, and then look up the code by viewing the Page HTML.
Here, you might just want to search the Page HTML for <body bgcolor="#NUMBER" at your page.

After that is set, fill in your images' names after <img src = "YOUR_IMAGE.jpg" & the sequence number after id= "Image#" in the sequence you want them to show in the slide, enter the width & height px you've resized your images to, and add as many lines as you have images for your slideshow in the same manner.

4) Insert an HTML object in your page in BlueVoda and then copy & paste everything you have in your notepad into that HTML box.
Now stretch & move the box to how large (should have the height you've defined in the first line) & where you want it to be on your page and publish.

ALTERNATIVELY you may also use this script code to place into an HTML box on your page, which I've found on dynamicdrive.com, and adjust it to your needs:

<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imageg ap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<div style="overflow:hidden;width:100px;visibility:hidd en;position:absolute;top:-100px;left:-9000px;"><span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span></div>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftr ightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+" px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slideme nu2
ns_slide2=document.ns_slidemenu.document.ns_slidem enu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+

)
cross_slide.style.left=parseInt(cross_slide.style. left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style .left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+

)
cross_slide2.style.left=parseInt(cross_slide2.styl e.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style .left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+

)
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshow gap

if (ns_slide2.left>(actualwidth*(-1)+

)
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshow gap
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';hei ght:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';hei ght:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

**zuriatman** · 04-05-2010, 06:12 AM

Re: How do i add a slideshow

Using the Conveyor in BV 11.4 is simplest; No need for scripts!

Check this out.............

**buck1942** · 04-06-2010, 12:53 AM

Re: How do i add a slideshow

Follows is the HTML code that I have used to put a simple slideshow online. It works well and is easy to implement, with very little code change required...

Using the Blue Voda Website Builder, create an HTML box and then copy all of the following code into your newly created HMTL box/window.

The ONLY lines that you need to be concerned with, begin with either "dropimages" or "droplinks". Make changes to these lines (add more if you need to), save and test... pretty slick!

This code was written by someone at http://www.dynamicdrive.com and they did a really nice job.

I did create a couple of rectangles and put them behind my slide show in order to extablish a border. I used black and gray, which added a little dimension to the photos and looked kinda nice.

Probably best to have all of your photos the same size. I used 320x240.

You may want to set the "droplinks" line to NULL, that is "" unless you want your slide show to have active links (not a bad feature; however). See "droplinks[1]" for an example of setting the link to NULL.

I have not tested it, but I would have a corresponding "dropslink" or each "dropimages".

Hope that this helps someone.

Buck

============== code begins below this line ===============

<script language="JavaScript1.2">
//Presentational Slideshow Script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for legal use
var slideshow_width='320px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='240px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
var slidebgcolor="white"
var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="http://yourwebsite.com/images/slideshow1/pic1.jpg"
dropimages[1]="http://yourwebsite.com/images/slideshow1/pic2.jpg"
dropimages[2]="http://yourwebsite.com/images/slideshow1/pic3.jpg"
var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]="http://www.yahoo.com"
droplinks[1]=""
droplinks[2]="http://www.google.com"

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+' ;height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+' ;height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+' ;height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')
var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1

function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}
function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}
function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>

Announcement

How do i add a slideshow

How do i add a slideshow

Comment

Comment

Comment

Comment

Comment