Results 1 to 10 of 10

Thread: Configure - Swiss Army Image Slideshow

  1. #1
    Join Date
    Sep 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Configure - Swiss Army Image Slideshow

    1) Script Title: Swiss Army Image Slideshow

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

    3) Describe problem: Can not figure out what this does

    onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

    or how to configure; specifically this.href.

    Other than that this is a great and highly flexible script.
    Last edited by RobertJ; 10-22-2008 at 03:06 PM.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    window.open() opens a new window and could accept three parameters.
    1. The URL of the page you wish to open
    2. The "window name"
    3. The desired settings of the new window

    For further reading:
    http://developer.mozilla.org/en/DOM/window.open
    http://www.javascript-coder.com/wind...dow-open.phtml
    http://www.w3schools.com/HTMLDOM/met_win_open.asp
    http://www.pageresource.com/jscript/jwinopen.htm

    this.href gets the value of the href attribute that is the owner of the function. this keyword refers to the "owner" of the function. For example:
    Code:
    <a href="http://www.google.com" onclick="window.open(this.href);return false;">Google</a>
    Opens a new window having the URL that of the value of href. In the example, it's http://www.google.com.

    For further reading:
    http://www.quirksmode.org/js/this.html

    Hope that makes sense.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    All it does is open a new window with this.href (the pictures href).
    Edit:
    Rangana beat me. Oh, and Rangana:
    Code:
    <a href="http://www.google.com" onclick="window.open(this.href);return false;">Google</a>
    Isn't such a great example, a better one would be:
    Code:
    <span rel="http://www.google.com" onclick="window.open(this.href);">Google</span>
    Jeremy | jfein.net

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Quote Originally Posted by Nile View Post
    Edit:
    Code:
    <a href="http://www.google.com" onclick="window.open(this.href);return false;">Google</a>
    Isn't such a great example, a better one would be:
    Code:
    <span rel="http://www.google.com" onclick="window.open(this.href);">Google</span>
    Nile, that's totally erroneous in a number of ways:
    1. That's invalid. rel is not a valid attribute for span tag.
      For further reading:
      http://www.w3.org/TR/REC-html40/stru...html#edef-SPAN
      http://www.w3schools.com/TAGS/tag_span.asp

    2. span don't have an href attribute as what you declared here:
      Code:
      <span rel="http://www.google.com" onclick="window.open(this.href);">Google</span>


    ...and lastly, why are you considering yours as a better example than mine? What's wrong with my example btw?
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Sorry, I forgot to change it to this.rel, it would be a better example for "this". Doing what you did would still go to google.com whether or not it had js attributes on it.
    Jeremy | jfein.net

  6. #6
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    ...but rel is not a valid attribute for span tag.

    Quote Originally Posted by Nile View Post
    Doing what you did would still go to google.com whether or not it had js attributes on it.
    No, it would'nt go to google.com, I hope you see the return false; syntax from the example above:
    Code:
    <a href="http://www.google.com" onclick="window.open(this.href);return false;">Google</a>
    The only instance where it would to go google.com is when users has JS disabled.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by RobertJ View Post
    1) Script Title: Swiss Army Image Slideshow

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

    3) Describe problem: Can not figure out what this does

    onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

    or how to configure; specifically this.href.

    Other than that this is a great and highly flexible script.
    It is used by the script to open a new window with specifications onclick of the images in the slideshow, or to do anything else you might want to have happen onclick of those images. As such (carrying on with the flexible nature of the rest of the script) it is only an example, and this.href will refer to the link (if any) configured for the image in the slides array(s). Similarly, this.target will refer to the target (if any - defaulting to '_self') configured in the array(s). But it is there to be used as needed, and could be changed completely, to - say (for example):

    Code:
    onclick = "alert('Hey, you clicked me!');"
    or whatever else might best suit your purposes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Sep 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    Sorry but I didn't make myself clear. In the config for the script slides are assigned as

    slides[0] = ['../../photos/school/photo_101.jpg', 'Gathering'];
    slides[1] = ['../../photos/school/photo_102.jpg', 'Helping'];


    and other general parameters as

    slides.image_controls=1;
    slides.manual_start=1;
    slides.button_highlight='#FFFFFF';
    slides.delay=3000;


    where "slides" is an array variable that is declared earlier in the script.

    What I'm trying to figure our is how to attach the onclick event to a particular image(s) in the slideshow. This is the "code" with my specifics for slide[1] but have not figured out how to "attach".

    onclick="window.open(../../images/aa_prin_rec.jpg,Test,'top=0, left=0, width=210, height=215');return false;"

    In the authors documentation all he says is
    Use this for customized onclick event for linked images:
    I started looking at the authors code but it is a bit tedious, over 400 lines of uncommented JS.

    .

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I am the author. The main script itself needs no comments, though I admit it might benefit from them, as any code may. You shouldn't be editing it or looking to it for guidance unless you are very familiar with coding, or just trying to learn in general. However, the portion of the code that goes on your page is fairly well commented. There it clearly states (from code on the demo page in Step 1):

    Code:
    //Notes:
    //slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
    //slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
    //slides#.fadecolor will set fading images background color, defaults to white
    //slides#.no_controls will set a slide show with no controls
    //slides#.random will set a random slide sequence on each page load
    //slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
    //slides#.jumpto=1 will display added controls to jump to a particular image by its number
    //slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls
    
    //use below to create a customized onclick event for linked images in a given show:
    //slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"
    What may be unclear is that in the slide array(s), you can do (as you seem to already know):

    Code:
    slides[0] = ['../../photos/school/photo_101.jpg', 'Gathering'];
    slides[1] = ['../../photos/school/photo_102.jpg', 'Helping'];
    Or alternatively, by extending the array entry (as you appear to have missed, but also shown in the Step 1 code on the demo page):

    Code:
    slides[0] = ["dome.jpg", "description", "http://www.msn.com", "_new"];
    Once you do that, if you configure:

    Code:
    slides.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"
    for that array, this.href will use the link, and this.target will use the target specification.

    If that's not enough, you can also extend the array entry to create a custom onclick window.open specification for each or a single entry (also shown in the Step 1 code from the demo page):

    Code:
    slides[0] = ["some.jpg", "caption", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
    But I'm not here to defend the script as perfect or anything like that. On the contrary, my coding style is constantly evolving. There are a great many things I would do differently with this script today.

    I did try to answer your question with my previous post in this thread, as well as with this post. I apologise for the other respondents' apparent lack of familiarity with the script itself. If you still are in doubt as to how to use that feature, feel free to ask for more clarification.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Sep 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John - thank you!

    When I transferred the info from the demo page I "simplified" it by using only slideshow #1; I figured all I needed to do was read your configuration sheet. In the process I missed the 3rd parameter in

    slides3[2] = ["3_side.jpg", "", "http://www.dynamicdrive.com"];

    With regard to the script I rate it the best of anything I've found out there with regard to the ability to configure and customize.

    PS: My JavaScript abilities are "OK" as long as I have my copy of JavaScript - The Definitive Guide by Flanagan next to me.

Bookmarks

Posting Permissions

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