Support forum for Simple Rotating Splash Banner

This is the support forum for the Simple Rotating Splash Banner modification.

This mod instructs you how to change the default static banner shown in Homepage, to a JQuery based image rotator, which rotates between several photos, with a fade effect and pause-on-hover.

A very simple mod with a lot of added value. and- it's free :)

The 7.1.1 software modifies your code and does a few things to the formatting.

In lines 2 and 3, it alters the path and breaks the link by putting in a backslash instead of a "/" in the filepath. I can't make it show here because the software removes backslashes. The left/right image pointer thingies ">" and "<" are not in the right place and they don't work. Clicking the image only moves it to the next image in the sequence.

Also, the image looks to be a little big on the right side, it extends over the box by a few pixels. This may be easy to fix by editing the image to fit.

<p></p>
<div id="fader"><img src="http://outdoorexperts.pro/imagesbanner1.jpg" /> <img src="http://outdoorexperts.pro/imagesbanner2.png" /> <img src="http://outdoorexperts.pro/imagesbanner3.jpg" /></div>
<div class="button" id="next">&lt;</div>
<div class="button" id="prev">&gt;</div>
<p>
<script language="Javascript" type="text/javascript">// <![CDATA[
$(function() {
$('#fader img:not(:first)').hide();

$('#fader img').each(function() {
var img = $(this);

});

var pause = false;

function fadeNext() {
$('#fader img').first().fadeOut("slow").appendTo($('#fader'));
$('#fader img').last().hide();
$('#fader img').first().fadeIn("slow");
}

function fadePrev() {
$('#fader img').first().fadeOut("slow");
$('#fader img').first().hide();
$('#fader img').last().prependTo($('#fader')).fadeIn("slow");
}

$('#fader, #next').click(function() {
fadeNext();
});

$('#prev').click(function() {
fadePrev();
});

$('#fader, .button').hover(function() {
pause = true;
},function() {
pause = false;
});

function doRotate() {
if(!pause) {
fadeNext();
}
}

var rotate = setInterval(doRotate, 5000);
});
// ]]></script>
</p>

So, I just removed the lines that put in the < and the > and I have an rotating splash.

I'll work on the code a little and see what I can come up with.

Carl

Ok. I mod'ed it and replaced the join buttons. I'm happy with the way it looks, I still have to edit the pictures to make them fit.

Thanks a ton for getting this project started. I hope my additions help.

Hi, thank you for the feedback and for testing the mod.

I'm not sure about 7.1.1 changing the direction of backslashes, as I have this rotating splash set on my own site, which is 7.1.1 based, without such an issue.

I've noticed that in the example you pasted above, you left out the entire CSS section. Is that on purpose? If not- it might explain why your left/right arrows are not in their place, and why you struggle with image resize. The CSS section takes care of it all, and appears in the beginning of the code you need to paste, as described in the instructions file.
Might have saved you a little work...

Regarding the banner image size: I've used the size of the default Boonex splash banner (bx_splash_image.jpg). It does actually appear to be a little over to the right, but I guess it's nothing a little CSS can't fix...

Let me know if it answers your questions.

P.S: I'm not sure what editor you've used in order to view the Readme file, but it might have to do with the fact it "swallowed" the CSS section. Try opening it as a plain text, with notepad if you're using Windows.

I opened the file with simpletext...I use a mac, so it's pretty brainless.

I didn't truncate, remove, or change anything. I pasted the text from your file into the html editor and when I hit save, I think Dolphin "cleaned up" the code and changed it...That's why I had to go fix the backslashes and whatnot. The text file I uploaded was what Dolphin did plus a little on the bottom to put in some text and login/join buttons...

Here's a snippet from the readme file as shown in Win's notepad. This part is missing from your code:

As you can see, I've wrapped the example with <html><head> and <body> tags. I'm thinking that maybe simpletext treated it as an HTML file, showing you only the body content.

I have no experience using a Mac, but if there's a different file format I can save this Readme file as, for Mac users, please let me know.

Ok. Let me try again...

I paste your code, it looks exactly the same in my simple-text as it does in your notepad.

I hit save.

I re-open the file and the code has been changed and links are broken, by dolphin, and I have to fix stuff.

That's why I uploaded the RTF file. That contains the code that dolphin created, plus a little bit I added at the end.

I don't know what is different in our versions, but I'm running D7.1.2

Carl

Hi Guy,

I want to add caption for images any idea would be appreciated.

Take care,

Thank you so much. This was a ton of help.

When I used the code there is < > at the end of the images but I can't find where it is in the code.