HTML code question

QuadLeo · 25-01-2011 3:16pm #1

Hey, I'm a very casual and amateur website builder. I'm putting together a website using iWeb and I want to insert an HTML Snippet that will allow me to display an image on the page and automatically fade to another image after a few seconds. And repeat this for x amount of images. I've searched for code that will allow me to do this but I haven't had any luck getting it to work.
So if somebody could point me in the right direction that would be great. Or even better point me to somewhere that has the code.

Any help is appreciated. I'm not to good when it comes to HTML codes and stuff.

The code I've tried is here but I don't have a clue how to get it to work. It may not even be the right code at all. I'm clueless really.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1",
dimensions: [300, 220],
imagearray: [
["Image1 URL", "RFYW1PP.jpg", "_top", "Description"],
["Image3 URL", "RFYW2PP.jpg", "_top", "Description"],
["Image4 URL", "RFYW3PP.jpg", "_top", "Description"],
["Image5 URL", "RFYW4PP.jpg", "_top", "Description"]
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false, randomize:false},
persist: false,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""
})

</script>
</head>
<body style="background: rgb(255, 255, 255); margin: 0pt; ">
<center>
<div id="fadeshow1" style="height: 220px; left: 0px; position: absolute; top: 0px; width: 300px; z-index: 1; "></div>
</center>
</body>
</html>

mark renton · 25-01-2011 3:35pm

random picture function below

 
window.onload = choosePic;
function choosePic(){
 var myPix = new Array("./images/albert.jpg",
       "./images/alsation.jpg",
        "./images/istabraq.jpg");
 var randomNum = Math.floor((Math.random() *
  myPix.length));
 document.getElementById("myPicture").src = 
  myPix[randomNum];
}

tricky D · 25-01-2011 3:47pm

Google 'jQuery slideshow' or 'jQuery carousel'

Lots of solutions there.

However it might be a good idea to use a better doc type declaration than:

<!DOCTYPE HTML>

Try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

It helps avoid some issues (not sure if it makes a difference in these cases but it's a good idea nevertheless)

fenderlvr · 25-01-2011 5:07pm

The doctype is fine. That's the new HTML 5 doctype which I suggest you use.

As far as your problem, what exactly happens? Does nothing show up? Do you get a javacript error?

Could you also post that fadeslideshow.js file?

Giblet · 25-01-2011 5:16pm

innerfade.js is good for this!

Basically you insert some structure into your html

<ul id="myImages">
  <li><img srg="myImage1.jpg" alt="myImage1" /></li>
  <li><img srg="myImage2.jpg" alt="myImage2" /></li>
  <li><img srg="myImage3.jpg" alt="myImage3" /></li>
  <li><img srg="myImage4.jpg" alt="myImage4" /></li>
</ul>

and, with innerfade.js imported
<script>
$('#myImages').innerfade({ speed: slow, timeout: 2000, type: 'sequence', containerheight: '300px' }); 
</script>

tricky D · 25-01-2011 5:17pm

fenderlvr wrote: »

The doctype is fine. That's the new HTML 5 doctype which I suggest you use.

So it is, thanks. Guess I should get round to html5 a bit sooner.

QuadLeo · 25-01-2011 6:28pm

Thanks for all the info everyone

Giblet wrote: »

innerfade.js is good for this!

Basically you insert some structure into your html

<ul id="myImages">
  <li><img srg="myImage1.jpg" alt="myImage1" /></li>
  <li><img srg="myImage2.jpg" alt="myImage2" /></li>
  <li><img srg="myImage3.jpg" alt="myImage3" /></li>
  <li><img srg="myImage4.jpg" alt="myImage4" /></li>
</ul>

and, with innerfade.js imported
<script>
$('#myImages').innerfade({ speed: slow, timeout: 2000, type: 'sequence', containerheight: '300px' }); 
</script>

I'm still a bit in the dark as to how I implement this code? Is it a matter of copying it into my page (or HTML Snippet as iWeb calls it), and changing the file names to my own file names? Do I need to create a javascript file for innerfade.js? I've no experience when it comes to this stuff at all.

Giblet · 25-01-2011 8:10pm

QuadLeo wrote: »

Thanks for all the info everyone

I'm still a bit in the dark as to how I implement this code? Is it a matter of copying it into my page (or HTML Snippet as iWeb calls it), and changing the file names to my own file names? Do I need to create a javascript file for innerfade.js? I've no experience when it comes to this stuff at all.

Ah ok,

First download this.
http://medienfreunde.com/stats/getfile.php?id=3

Extract the zip file and in the extracted folder, browse to
jquery.innerfade\js

In that folder you will see jquery.innerfade.js

Copy that file to your website directory

You then need to import this file into your website using the following tag inside your head tag

<script src="path/to/script/jquery.innerfade.js" type="text/javascript"></script>

Change the path inside the src attribute to point to the correct file.

Then, copy the html I wrote into your body tag, changing the image links to point to your own images.

Oh, and because I'm an idiot
It's not <img srg
it's <img src

QuadLeo · 26-01-2011 12:21am

Cheers Giblet, I can follow that. I'll give it a shot tomorrow and see how I get on.

Adam · 26-01-2011 9:32am

if you're using an iLife version before '08 i believe you'll have problems just adding js through this method

QuadLeo · 26-01-2011 4:10pm

Giblet wrote: »

Ah ok,

First download this.
http://medienfreunde.com/stats/getfile.php?id=3

Extract the zip file and in the extracted folder, browse to
jquery.innerfade\js

In that folder you will see jquery.innerfade.js

Copy that file to your website directory

You then need to import this file into your website using the following tag inside your head tag

<script src="path/to/script/jquery.innerfade.js" type="text/javascript"></script>

Change the path inside the src attribute to point to the correct file.

Then, copy the html I wrote into your body tag, changing the image links to point to your own images.

Oh, and because I'm an idiot
It's not <img srg
it's <img src

I've been at this for a while with no luck. I've uploaded the jquery.innerfade.js file to my site's Scripts directory. I've inserted the code you gave me into the head tag of testpage.html

<script type="text/javascript" src="Scripts/jquery.innerfade.js"></script>

So next I copied the other code you gave me into the body of the page (testpage.html). The .jpg files are in the testpage_files folder in my website directory.

<ul id="myImages">
  <li><img src="testpage_files/myImage1.jpg" alt="myImage1" /></li>
  <li><img src="testpage_files/myImage2.jpg" alt="myImage2" /></li>
  <li><img src="testpage_files/myImage3.jpg" alt="myImage3" /></li>
  <li><img src="testpage_files/myImage4.jpg" alt="myImage4" /></li>
</ul>

This seems to display all the images in a list down the page with a bullet point to the top left of each image.

I inserted the script code into the body of testpage.html also.

<script>
$('#myImages').innerfade({ speed: slow, timeout: 2000, type: 'sequence', containerheight: '230px' }); 
</script>

But this doesn't seem to do anything.

Am I placing the code in the right place? Am I missing something?

Giblet · 26-01-2011 4:53pm

Do you have JQuery added to the page too? You need to add that script also if it isn't already. It's actually in the innerfade zip also.

QuadLeo · 26-01-2011 5:12pm

That's it. All I need to do now is get rid of the bullet point and ident to the left of the image.

I tried

<ul class="NoBulletNoIndent" id="myImages">

. No luck yet. I'm getting there though.

Thanks!

Giblet · 26-01-2011 5:29pm

You need CSS

for the moment, try

<ul id="myImages" style="list-style:none;padding:0;margin:0">

I'd learn how to use style sheets though, to abstract the styling out of the HTML code.

QuadLeo · 26-01-2011 5:42pm

That sorted it. Thanks again.

I really don't have a clue. I should do a web design course or something and learn how to build sites properly rather than relying on iWeb and code from other people. But anyways, problem solved.

Giblet · 26-01-2011 5:45pm

Cool, glad to help, hope it looks awesome

With innerfade, any content inside those <li> tags can be faded between.

HTML code question

Comments