View Full Version : Flexi slideshow

04-05-2011, 09:08 PM
1) Script Title: Flexi slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/flexislide.htm
3) Describe problem: I fell like a dummy but I can't place the slideshow images where I'd like them on my page. I tried using a div, no luck. Can someone give me an example of the code to place the rotating images on a specific place on my page? Thanks

04-09-2011, 02:56 AM
From the demo page:

Simply add the below where you wish the slideshow to appear:

Take that very literally, example:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Here's some content, then comes the script:
<script type="text/javascript">

* Flexi Slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['http://www.dynamicdrive.com/dynamicindex4/ball.gif', '', '']
variableslide[1]=['http://www.dynamicdrive.com/spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
variableslide[2]=['http://www.dynamicdrive.com/dynamicindex4/cake.gif', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='130px' //set to width of LARGEST image in your slideshow
var slideheight='120px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()

var currentslide=0

function rotateimages(){
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
if (variableslide[currentslide][2]!="")

if (document.layers){
else if (ie||dom)
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)

if (ie||dom)
else if (document.layers)


More content here

Or you could put it in a table cell, or use floats, whatever you like. Think of the script as a single image with a <br> tag before it and a <br> tag after it. Like if you put this somewhere in your page's source code:

<br><img src="some.jpg" width="130" height="120" alt=""><br>

Because the dimensions are the same as those in the demo script, it would layout the same as the demo script.