[snippet]Simple Slide Show

☆ A M B ☆
24,524 Posts

sottwell Reply #1, 21 years ago

here’s a simple slide show image for a small block.
Use it like so (I put this in a chunk so I can put it wherever I want):

<div id="image">
<img id="slides" src="assets/images/slides/flowers.jpg" alt="desert scenes" width="130" height="164"/>
[[InitSlides?folder=`slides`&interval=`5`]]
</div>

Note that it is VERY IMPORTANT to have the snippet tags AFTER the initial image tag! Also the initial image MUST have the id="slides" attribute.

Put the .js file in assets/js; create the js folder if necessary.

I’m using it on my site http://www.sottwell.com with the "theo" template. (I really like that template, Theo! kiss

)

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

3,250 Posts

MARKSVIRTUALDESK Reply #2, 21 years ago

Really cool! Nice work Susan!

2,204 Posts

Dimmy Reply #3, 21 years ago

I made a small javascript fade slide show that gets images from a dir.

maybe some one likes it:

<script language="JavaScript">
<!--

function reapply() {
    setTimeout("slideit()",0);
    return true;
}

window.onerror=reapply;


//The number of images to choose from
var nrImages=22;
var imageNameBase="assets/images/image";
var imageExtention=".jpg"

var step=randomNr()

function slideit() {
    if (!document.images)
        return;

    if (document.all)
        slide.filters.blendTrans.apply();

    document.images.slide.src = imageNameBase;
    //add leading zero's to the number
    if (step < 10)
        document.images.slide.src += "0";
    if (step < 100)
        document.images.slide.src += "0";
    //add number and extention
    document.images.slide.src += step+imageExtention;

    if (document.all)
        slide.filters.blendTrans.play();

    step=randomNr();

    setTimeout("slideit()",8000);
}

setTimeout("slideit()",0);

function randomNr() {
    return Math.floor(Math.random() * nrImages);
}
//-->
</script>

 <img src="assets/images/spacer.gif" border=0 name="slide" style="filter:blendTrans(duration=4); valign:middel">

its importent to name your images like this image000.jpg, image001.jpg, image 002.jpg
and to have a spacer.gif in the assets/images folder.

In IE it fades from one to the other in FF it does not it just behaves like the one susan made.

Greets Dimmy

follow me on twitter: @dimmy01

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 21 years ago

The original javascript I used also "fades" with IE; I ripped it out since I’ll never see it wink

Here’s the original Javascript, if the fade is really wanted.

// Browser Slide-Show script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
var slideCache = new Array();
function RunSlideShow(pictureName,imageFiles,displaySecs)
{
  var imageSeparator = imageFiles.indexOf(";");
  var nextImage = imageFiles.substring(0,imageSeparator);
  if (document.all)
  {
    document.getElementById(pictureName).style.filter="blendTrans(duration=2)";
    document.getElementById(pictureName).filters.blendTrans.Apply();
  }
  document.getElementById(pictureName).src = nextImage;
  if (document.all)
  {
    document.getElementById(pictureName).filters.blendTrans.Play();
  }
  var futureImages= imageFiles.substring(imageSeparator+1,imageFiles.length)
    + ';' + nextImage;
  setTimeout("RunSlideShow('"+pictureName+"','"+futureImages+"',"+displaySecs+")",
    displaySecs*1000);
  // Cache the next image to improve performance.
  imageSeparator = futureImages.indexOf(";");
  nextImage = futureImages.substring(0,imageSeparator);
  if (slideCache[nextImage] == null) {
    slideCache[nextImage] = new Image;
    slideCache[nextImage].src = nextImage;
  }
}

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

12 Posts

gunner Reply #5, 20 years, 11 months ago

I would like to get this implemented, but I am not sure where to place the InitSlides.snippet.php file. Where do I put this file?

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 20 years, 11 months ago

Create a new Snippet in the manager, and copy/paste the text from the file. Name the snippet InitSlides.

(I only gave the file the .php extension so my color-coded editor will automatically color-code it when I open it.)

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

12 Posts

gunner Reply #7, 20 years, 11 months ago

Thank you so much for replying so quickly! I have a small dent in my desk now from a little brain bashing over the last hour or so... tongue

It works perfectly!

159 Posts

nissai Reply #8, 20 years, 11 months ago

i tried to use the snippet in the the default template and i get a javascript error runslide show not defined.
http://efm.lasiate.com/
But in a new page with minimal template it’s working .
http://efm.lasiate.com/index.php?id=49
I guess it’s a conlict between two scripts.

2,204 Posts

Dimmy Reply #9, 20 years, 3 months ago

OK I’v edited the snippet so it only needs the snippet call and the js file
no need for the img tag in a chunk.
I merged the img tag into the snippet and it wil display the last file of the folder first and then starts the show with the first one.
the fade effect for ie is also back in.

usage:

 [!InitSlides?folder=`slidefolder`&interval=`5` &width=`300` &height=`300`!]

this part

$src="assets/js/slides.js";
$modx->regClientStartupScript($src);

dit not work for me somehow so i added the folloing line to my template:

<script type="text/javascript" src="assets/js/slides.js"></script>

follow me on twitter: @dimmy01