If I could just get a couple of pictures to work properly, I am sure I could figure it out from there. I just don't understand the coding.
Any help would greatly be appreciated!!!
Can someone help me with the correct coding?
I did not understand the directions given on the site. Like I said earlier, I understand basic html but not javascript.
I asked a friend of mine to help get me started. I believe I have a <script> in the <head> tag and a function in the <body> tag.
If you can help with the <script>, can you explain which part goes in the <head> and which goes in the <body>. Do I also need a function with this script?
Ok - so as I understand it - you want the same example from the dynamic drive website, on each of your photos in your scout website - so you can rotate between the front and back of each pin.
You are defintely going to need to call this programatically, not as it suggests to use that whole chunk of code under "More Information" - will need to go in a foreach loop after you have defined an array of all of the images, and having said that, your images should have a filename convention of image<x>_<front/back>
So you say you understand the basics of html, so, without showing any of your code, I can only assume it has been laid out correctly. And to complete this thing, I (for one) and am not just going to write out all the code for you, if you want this done, you're going to have to do most of the work - so start reading!
What I will say (at least for now) is that each pair of images will need to be housed in it's own DIV tag, I'm not at home and without the best resources to advise you how, but with as many instances as this calls for, it should be modified to work off a DIV class, not ID - otherwise as I said before, your DIV ID's will also be named by a certain programmable convention.
So yeah, get an good understanding of DIV's, Array's, Loops (e.g. for loop in javascript) and DIV ID's, because a forum can only take you so far. Also post at least some attempts of code what you are trying to do.
I took a web design class years ago and am very rusty.
I really do not understand the <div> tags. I am reading up and trying to understand them. I don't understand the difference between ID and CLASS.
If you can help me get some pictures to appear the way I am hoping, I should be able to get the idea and continue working on the other pictures I have. I currently do not have pictures of the backs of the pins. For now, I included a "Photo Coming Soon" Picture. When the script works the way I want it, I will then be taking pictures of the backs of the pins.
I know this is completly wrong (It is not the way I am requesting the page to look), but I wanted to show you the work I had done previously.
I basically copied the code on the website and tried to change it on my own.
/***********************************************
* 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://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type1.png", "", "", "Type 1 Hat Pin (1921 - 1924)<br>(Blue-White-Red)<br>BSA on the eagle's chest"],
["http://i733.photobucket.com/albums/ww336/discovery626/Photo.png", "", "", "Back of the Pin"]
],
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://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type2a.png", "", "", "Type 2 Hat Pin (1924-1932)<br>(Red-White-Blue)<br>BSA on the eagle's chest (Version 1)"],
["http://i733.photobucket.com/albums/ww336/discovery626/Photo.png", "", "", "Back of the Pin"]
],
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: "always",
togglerid: "fadeshow2toggler"
})
var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //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://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type2b.png", "", "", "Type 2 Hat Pin (1924-1932)<br>(Red-White-Blue)<br>BSA on the eagle's chest (Version 2)"],
["http://i733.photobucket.com/albums/ww336/discovery626/Photo.png", "", "", "Back of the Pin"]
],
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: "always",
togglerid: "fadeshow2toggler"
})
var mygallery4=new fadeSlideShow({
wrapperid: "fadeshow4", //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://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type3.png", "", "", "Type 3 Hat Pin (1933-1955)<br>(Red-White-Blue)<br>BSA removed from the chest"],
["http://i733.photobucket.com/albums/ww336/discovery626/Photo.png", "", "", "Back of the Pin"]
],
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: "always",
togglerid: "fadeshow2toggler"
})
var mygallery5=new fadeSlideShow({
wrapperid: "fadeshow5", //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://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/DSC07125-1.png", "", "", "Distinguished Eagle Hat Pin<br>(Robbins 10K Gold)"],
["http://i733.photobucket.com/albums/ww336/discovery626/Photo.png", "", "", "Back of the Pin"]
],
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: "always",
togglerid: "fadeshow2toggler"
})
Ah, Vic, thank you for pointing this out - and Brian... When exactly were you going to fill me in you were already getting help, huh??
Never the less, I had already started writing some stuff out which could also assist... Shame to throw it away now... Though some of it is now irreverent, so I'll clean it up...
By definition, an ID can only be applied to ONE unique object. Be it a DIV, P, BODY, whatever. A set of properties assigned to a class however can be applied to many objects. By the way, a DIV is really just a tag to be used as an inline block.
I don't see where you have included the dynamic drive script "simplegallery", have you just renamed it to "fadeslideshow"? If not, you'll need to include this javascript source.
to that simplegallery.js source though, I've modified it. See the attached zip. This removes the need to specify a div ID, as you are doing so on this line:
Code:
wrapperid: "fadeshow1",
I've changed this property to be "wrapperclass", so, similarly, you'll now call this like:
Code:
wrapperclass: "fadeshowclass",
Or whatever you want to call it... So, you can ultimately have your DIV's like:
and that means you only need to call this javascript block ONCE:
Code:
var mygallery=new fadeSlideShow({
wrapperclass: "fadeshowclass", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
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"
})
Note that I've removed "imagearray" and "togglerid" - I saw no reference to this "togglerid", and besides that, it suggests the use of an ID - which you were using the same for each one - not a smart thing to do.
To fix the issue with the imagearray seeing as you can't specify each array for each class object, in the attached zip, what I've tried to compensate is that the each class object (wrapperclass), it will just seek the class's IMG children.
This modification is largely untested - but I invite you to look through it and try to understand what the script is doing.
Anyway, as I've said - am peeved you've already started getting help from another forum and still seeking code and aid when you have already gotten perfectly good help and code, so I'll end my help here.
Reply With Quote
Eagle Scout Pins Website
Bookmarks