Hi everyone,
I've put together a simple javascript slideshow, mostly using code from webmonkey. I'm a JS newb, and have heard that Jquery is amazing, though I have no idea how (or if I even need to) install it in drupal.
The slideshow is on a "page" on my site, and working fine, except for the fact that the crossfade isn't working at all (it will display all of the images in the correct order, but without the fade effect).
In my .info file, I have written:
scripts[] = script.js
scripts[] = text/javascript
just to be on the safe side, though, from what I can gather, JS is "automatically" included with drupal.
The code I have on my page is this:
<head>
<SCRIPT LANGUAGE="JavaScript">
var slideShowSpeed = 5000;
var crossFadeDuration = 300;
var Pic = new Array();
Pic[0] = '/sites/all/files//slideshow/01.jpg'
Pic[1] = '/sites/all/files//slideshow/02.jpg'
Pic[2] = '/sites/all/files//slideshow/03.jpg'
Pic[3] = '/sites/all/files//slideshow/04.jpg'
Pic[4] = '/sites/all/files//slideshow/05.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
</head>
<BODY onLoad="runSlideShow()">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=320 width=480>
<img src="/sites/all/files//slideshow/01.jpg" name='SlideShow' width=480 height=320>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="thumbs" height=200 width=500>
<img src="/sites/all/files//slideshow/01_thumb.jpg" name='thumb1' width=95 height=63>
<img src="/sites/all/files//slideshow/02_thumb.jpg" name='thumb2' width=95 height=63>
<img src="/sites/all/files//slideshow/03_thumb.jpg" name='thumb3' width=95 height=63>
<img src="/sites/all/files//slideshow/04_thumb.jpg" name='thumb4' width=95 height=63>
<img src="/sites/all/files//slideshow/05_thumb.jpg" name='thumb5' width=95 height=63>
</td>
</tr>
</table>
Anyone have any ideas what I'm doing wrong? Do I need to write this script elsewhere?
Thanks very much!
Comments
Hello! At first glance I
Hello! At first glance I couldn't tell you what is wrong with what your doing here, however I would suggest that instead of manually writing all this out yourself, there are some great modules out there that can do fantastic things. I would suggest
1) Create a new content type called Image
2) Install the cck, filefield, and imagefield modules (there are other dependencies )
3) Add an image field to your Image Content type
4) Install imagecache module. Create a preset for the size you would like
5) Install views and views_slideshow modules
6) Create a view of all your image nodes that outputs as a slideshow. The views_slideshow module will let you control direction, effects, pager, etc.
I understand this is isn't the exact answer you were looking for, just wanted to show you how to accomplish this without coding anything. Let me know if you need any help with these steps.
Matthew - thanks much for
Matthew - thanks much for your response! I'll give your suggestions a shot!
step six trouble
I've followed you up until step six - could you give me a bit more advice on how to create a view of my images that exports as a slideshow? Thanks again!
code help?
anyone else interested in writing javascript/jquery code on individual pages? I'm trying modules, but after 6+ hours, I'm getting frustrated.
Tried views slideshow
Ok, on Matthew's advice, I tried the views slideshow - I followed this tutorial: http://www.bywombats.com/blog/06-08-2010/building-rotating-image-banner-...
It works nicely, aside from one caveat - I cannot figure out how to use the images as links to pages. What I want to do is create a simple slideshow wherein each image links to a page on my site. However, the way it's set up in this tutorial, the default url is "field_banner_link_value" -- how do I change this so that each image in my slideshow has a unique url (to a page on my site).
Thanks in advance.