Html / Java? (I think)

[Keydogg]

Hey guys,

I'm looking to enhance my website by having scrolling pictures which fade in and out through a series of say 4 or 5 pictures. Here is the website as it stands:

http://www.burstwickcountrygolf.co.uk/

Now this website is maintained and improved by myself, but done using a web contained management system. 90% of things I do are using a WYSIWYG editor in this system but there is the odd thing when I have to edit the CSS file or input a bit of HTML here and there.

I have basically learned how to do this by trial and error, looking at source code from other sites but I am barely competent! Here is the current CSS code for the header:

#header {
position: relative;
width: 1024px;
height: 300px;
display: block;
margin: 0 0px;
top: 0px;
z-index: 2;
background: url(/resources/25980/assets/images/Backgroundbanner3.jpg) repeat-x;
}

What java code would I need to put in to get the picture scrolling? Is it that simple?

Cheers!

 

[Adamio]

Have a look on http://www.dynamicdrive.com/

 

[Keydogg]

Thanks Adamio, I have looked on there under Image Effects but I can't seem to find anything regarding fading pictures. :S

 

[Adamio]

How about this ? http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

 

[Adamio]

There's some handy image manipulation scripts here aswell - http://www.netzgesta.de/cvi/

The reflex one is great

 

[conneh]

You could do it via a simple flash/gif image?

 

[sn00p]

search for "jquery slideshow", you'll find loads.

 

[conneh]

Java

var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar');
var path = 'http://demos111.mootools.net/demos/Asset.images/';
var images = [
path + 'cow1.png',
path + 'cow2.jpg',
path + 'cow3.jpg',
path + 'cow4.jpg',
path + 'cow5.jpg'
];
gallery.setStyles({'opacity': 0, 'display': 'none'});
progress.setStyle('visibility', 'hidden');
$('clear').setStyle('visibility', 'hidden');

$('start').addEvent('click', function(e) {
e = new Event(e).stop();
$('start').setStyle('visibility', 'hidden');
$('clear').setStyle('visibility', 'hidden');
if (!busy) {

var galleryImgs = $$('#gallery img');
if (galleryImgs.length > 0) galleryImgs.each(function(image) { image.remove(); });

busy = true;
progress.setStyle('visibility', 'visible');
gallery.setStyle('display', 'block');
new Asset.images(images, {
onProgress: function(i) {
this.setStyles({
'position': 'absolute',
'opacity': 0,
'left': (gallery.getCoordinates().width / 2) - (this.width / 2),
'top': (gallery.getCoordinates().height / 2) - (this.height / 2)
});
loadedImages = this;
var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length);
},
onComplete: function() {
progress.setStyle('visibility', 'hidden');
var fx = $('gallery').effect('opacity').start(1);
timer = 0;
loadedImages.each(function(image, i) {
timer += 1500;
image.inject(gallery);
fx = function() {
var imgEffect = image.effect('opacity', {duration: 1500});
imgEffect.start(1).chain(function() {
if (i < loadedImages.length - 1) {
this.start(0).chain(function() {
image.remove();
});
} else {
busy = false;
$('clear').setStyle('visibility', 'visible');
$('start').setStyle('visibility', 'hidden');
}
});

}.delay(timer * 2);
});
}
});
}
});

$('clear').addEvent('click', function(e) {
e = new Event(e).stop();
if (!busy) {
$$('#gallery img').each(function(image) {
image.remove();
});
var fx = new Fx.Style(gallery, 'opacity', {
onComplete: function() {
gallery.setStyle('display', 'none');
}
});
fx.start(0);
}
$('clear').setStyle('visibility', 'hidden');
$('start').setStyle('visibility', 'visible');
});

Html

<h3>Asset.images</h3>
<p><a href="#" title="Start loading" id="start">start</a><a href="#" id="clear" title="Clear data">clear</a></p>
<p id="log"></p>
<br />
<div id="progress"><div class="bar"></div></div>
<div id="gallery"></div>

CSS

#gallery {
position: relative;
margin: 10px auto;
width: 500px;
height: 400px;
background: #2a2a2f;
border: 2px solid #5f5f5f;
}

#progress {
margin: 10px auto;
width: 200px;
height: 15px;
padding: 2px;
border: 2px solid #dfdfdf;
}

#progress .bar {
width: 0px;
text-align: center;
font-size: 10px;
height: 15px;
background: #2a2a2f;
color: #fff;
font-weight: bold;
}

Look at Moo Tools

 

[Keydogg]

Thanks for the info Conneh, I just have a couple of questions. It would be easier for me to do this if I could edit the actual source code of the pages but I can't, it's through a contained manager.

Where would I put what?

<HEAD>

Global Header

CSS

Page itself

 

[Adamio]

Is there no options to upload and download pages ? Or if not can you FTP in to the site ?

Then you could just copy the file off, do the changes on your machine (even if it's just in notepad) and stick them back up there.

 

[Keydogg]

No Adamio I'm afraid not

 

[richo]

Ideally you want to be able to access the code to add in the required JS that you are looking for.

If you dont get on with the above code I have a JS for images changing that i've used before I can try and dig out for you.

 

[Keydogg]

I can input the JS Code in the "Embed Code" bit which is essentially just in the <HEAD> on each page so not a problem. I would assume the HTML would go in the "Global Header" container and the CSS would go in the CSS editor.

The bit I don't understand is can I change the name of the "#gallery" to "#header" because that's what contained system uses as the header picture on the site? If so how do I change it so the JS understand #header instead of #gallery?

 

[Keydogg]

Ok so let's say I put the Java code in the <HEAD> section as well as the Div ID bit, like this:

<HEAD><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) 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 this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>

<div id="fadeshow1"></div>

<br />

<div id="fadeshow2"></div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>
</HEAD>

Then what do I change about the CCS? (Currently looks like this)

#header {
position: relative;
width: 1024px;
height: 300px;
display: block;
margin: 0 0px;
top: 0px;
z-index: 2;
background: url(/resources/25980/assets/images/Backgroundbanner2.jpg) repeat-x;
}

Help! :headno:

 

[Keydogg]

Helpsies