www.webdeveloper.com
Results 1 to 7 of 7

Thread: Help With My Eagle Scout Website

Hybrid View

  1. #1
    Join Date
    Aug 2011
    Posts
    2

    Help With My Eagle Scout Website

    1) Script Title:
    Simple Controls Gallery v1.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...plegallery.htm

    3) Describe problem:
    I know basic html. I do not understand javascript.

    I am trying to copy the 2nd Demo on the site and apply it to my website.

    Please see my Eagle Scout Pins website below:

    http://eaglescoutpins.yolasite.com/blog.php

    I want the text to appear at the top of the picture and have the left arrow and right arrows at the bottom of the picture.

    The user will see a picture of the front of the pin.

    When the user clicks on the arrow, it will show you a picture of the back of the pin.

    I do not need the play / pause button. I would like 1/2 and 2/2 where the play button would normally be. (Between the arrows)

    Just how it shows on Simple Controls Gallery v1.4.

    http://www.dynamicdrive.com/dynamici...plegallery.htm

    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?

    Any help would be greatly appreciated.

    Thanks,
    Brian
    Eagle Scout

  2. #2
    Join Date
    Jan 2009
    Posts
    40

    Arrow

    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.

    - Jester.

  3. #3
    Join Date
    Aug 2011
    Posts
    2

    Exclamation Eagle Scout Pins Website

    Hello,

    Thank you so much for willing to help me!!!

    I have wanted this done for several years.

    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.



    <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://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"
    })

    </script>

    <body>

    <div id="fadeshow1">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type1.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>

    <br />

    <div id="fadeshow2">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type2a.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>

    <br />

    <div id="fadeshow3">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type2b.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>

    <br />

    <div id="fadeshow4">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type3.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>

    <br />

    <div id="fadeshow5">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/DSC07125-1.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jan 2009
    Posts
    40

    Question

    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:

    Code:
    <div class="fadeshowclass">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle&#37;20Scout%20Pins/Type1.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>
    
    <br />
    
    <div class="fadeshowclass">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type2a.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>
    
    <br />
    
    <div class="fadeshowclass">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type2b.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>
    
    <br />
    
    <div class="fadeshowclass">
    <img class=image1 src="http://i733.photobucket.com/albums/ww336/discovery626/Eagle%20Scout%20Pins/Type3.png" alt=""/>
    <img class=image2 src="http://i733.photobucket.com/albums/ww336/discovery626/Photo.png" alt=""/>
    </div>
    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.

    Good luck.
    Attached Files Attached Files
    Last edited by Jester; 08-19-2011 at 11:28 AM.

  6. #6
    Join Date
    Jan 2009
    Posts
    40
    Damnit, just realised the version I uploaded didn't have what I changed with the imagearray at all, sorry. Was something like (at line 29):

    Code:
    setting.imagearray = setting.getElementsByTagName('img');
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2]

  7. #7
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    590
    I've found that I learn a great deal from the error messages produced by the W3C validator. You may find these about your site informative: http://validator.w3.org/check?charse...e.com/blog.php

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles