Configure - Swiss Army Image Slideshow

[RobertJ]

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.

[rangana]

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:

<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.

[Nile]

All it does is open a new window with this.href (the pictures href).

Edit:
Rangana beat me. Oh, and Rangana:

<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:

<span rel="http://www.google.com" onclick="window.open(this.href);">Google</span>

[rangana]

Edit:

<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:

<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:
   

   <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?

[Nile]

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.

[rangana]

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

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:

<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.

[jscheuer1]

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):

onclick = "alert('Hey, you clicked me!');"

or whatever else might best suit your purposes.

[RobertJ]

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.

.

[jscheuer1]

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):

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

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):

slides[0] = ["dome.jpg", "description", "http://www.msn.com", "_new"];

Once you do that, if you configure:

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):

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.

[RobertJ]

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.