PDA

View Full Version : DHTML Slide Show - Open In New Window



PetFish
07-28-2005, 08:55 AM
http://dynamicdrive.com/dynamicindex14/dhtmlslide.htm

Does anyone know how to make it so when I click on an image it opens into a new window instead of the current one? It doesn't have to be anything fancy like a fixed width/height script or anything, just into _new or something like that. Also, setting the <base target="_new"> in the <head> doesn't work so it needs to be from within the script but I'm not a programmer so I'm totally stuck. Thanks in advance!

ddadmin
07-28-2005, 09:54 AM
Sure. Simply edit the line:

document.write('<a href="javascript:transport()">')

inside Code of Step 2 to:

document.write('<a href="javascript:transport()" target="_new">')

PetFish
07-29-2005, 05:39 AM
Thanks much, kind sir/madam, but I get a page not found error in IE and a blank page in Firefox when I click on the image. If you think you can still help me see what I mean here:
http://www.dreamstarmedia.ca/beta/portfolio/2005-07-15/index.html

Thanks again, I really appreciate it, this is my favourite slide script cuz of the transitions but if I can't get this new window thing to work then I'll just have to go with a different one. :(

ddadmin
07-29-2005, 06:43 AM
Ops, my mistake. Try this instead. Edit the line:

window.location=photoslink[which]

to:

window.open(photoslink[which])

PetFish
07-29-2005, 08:00 AM
Ok, dood, you rule! That works perfect now! I have two more requests, though, is it possible to have it open in a new window of x-by-x size and center-aligned (but x-by-x will be fine if that's all)? And, is it possible to make the slide show loop so that on the last one if you hit "next" it goes back to first and if on first and hit "back" it goes to last?

Sorry to keep bugging you but I soooooo want this to work!

AndieR
07-29-2005, 04:03 PM
Hello,

As my question is related to this script and the topic, I'll ask it here if you don't mind. Is there a way to make it so that when the user enters the slideshow page there is no "Previous link" and when the slideshow is completed there is no "Next" link? This would really be great!

Thank you for your time!

Regards,
Andie

ddadmin
07-29-2005, 06:25 PM
PetFish, sure I'll try and get to your other requests this weekend.

AndieR, the problem with what you're asking is that the user will eventually end up with no Prev nor Next link as he/she cycles through the slideshow. I'm not sure that's a good idea.

AndieR
07-29-2005, 07:20 PM
Hello ddadmin and thank your for your reply.

Well my idea is that when the user is seeing the first image of the cycle he has no Previous link (as there is no previous image so to speak) and when he is seeing the last image of the cycle there si no Next image (as this is actually the last of the photos). This would avoid users trying to click on a link that isn't really available...

Thank you for your time.

Regards,
Andie

jscheuer1
07-29-2005, 08:51 PM
AndieR, that can be done by modifying the script but, one would also have to modify it so as to make those links visible and active again as soon as they would do something. Another option is to leave the links alone but to modify the script so that previous points to the end when the show is at the beginning and next points to the beginning when the show is at the end. Your idea was worked out in this thread (http://www.dynamicdrive.com/forums/showthread.php?p=11593#post11593), more or less and I've done the other, just not sure where that info is, might have been on another board.

AndieR
07-29-2005, 08:59 PM
That's great! Exactly what I was looking for.

Thank you!

Regards,
Andie

ddadmin
08-01-2005, 12:17 PM
Ok, dood, you rule! That works perfect now! I have two more requests, though, is it possible to have it open in a new window of x-by-x size and center-aligned (but x-by-x will be fine if that's all)? And, is it possible to make the slide show loop so that on the last one if you hit "next" it goes back to first and if on first and hit "back" it goes to last?

Sorry to keep bugging you but I soooooo want this to work!

Ok, below is a modified version of the DHTML slideshow script that lets you specify both the dimensions of the popup window used to load a slideshow link, and also, centers the popup on the screen. Just replace the code of Step 1 with the below instead:


<script type="text/javascript">

/***********************************************
* DHTML slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="photo1.jpg"
photos[1]="photo2.jpg"
photos[2]="photo3.jpg"

//Specify whether images should be linked or not (1=linked)
var linkornot=1

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]="http://www.google.com"
photoslink[1]="http://www.cnn.com"
photoslink[2]="http://www.yahoo.com"

//Set dimensions of popup window that will load links, in pixels:
var popwidth=900
var popheight=600

//do NOT edit pass this line

////center popup code////////////

function detectexist(obj){
return (typeof obj !="undefined")
}

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos

/////end center popup code///////

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.open(photoslink[which],"",winattributes)
}

</script>

maffpunton
08-01-2005, 01:44 PM
Is it possible to do the above script where the linked image opens in a new window of fixed size, with no toolbars, status bars or scrollbars?

jscheuer1
08-01-2005, 01:59 PM
Aside from IE6 not allowing full online status bar elimination (it will allow it locally) using the window.open() command, it looks like the above code already does that. Did you try it out? In FF and other Mozilla browsers the effect should be complete.

ddadmin
08-01-2005, 05:21 PM
Is it possible to do the above script where the linked image opens in a new window of fixed size, with no toolbars, status bars or scrollbars?

It should already do that, as jscheuer1 mentioned. The line inside the script that controls the popup attributes are:


var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos

You can refer to this this tutorial (http://www.javascriptkit.com/javatutors/window3.shtml) for information on further customizing a popup window.

PetFish
08-01-2005, 09:47 PM
Ok, here we go, first thanks SO MUCH for working on this for me!

http://www.dreamstarmedia.ca/portfolio/2005-07-15/index.html

The window opens fine in FF but not in IE, meaning that when I change the window size in the code, nothing happens in IE but it does change the size in FF. Furthermore, I use Homesite and when I try and preview it within Homesite, which uses IE, I get this error:

http://www.dreamstarmedia.ca/bah.jpg

Any thoughts?

Finally, any word on making the slideshow loop so when "next" on last pic goes back to first and vice-versa?

jscheuer1
08-01-2005, 10:14 PM
Works fine here. I'd say ditch homesite for previewing, use the browser directly.

PetFish
08-02-2005, 04:07 AM
Even when I go to the link directly it's not sized properly, so I dunno wtf is going on.

jscheuer1
08-02-2005, 03:17 PM
Your page is not loading well right now, just slow. Anyways, I got a fairly good look at it last time. What do you want to have happen? IE has this habit of showing an image in the space of the window unless the image is on a page. Is the problem that the image is resizing to the window or that the window is not the size you thought you told it to be?

PetFish
08-02-2005, 10:24 PM
The window is not the size I specify in the code, but it is the size I specify when viewing in FF.

jscheuer1
08-03-2005, 12:57 AM
Replace this:

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}with this:
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.documentElement.offsetWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.documentElement.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

PetFish
08-03-2005, 07:10 PM
Wicked, thanks John! Now is anyone wanting to make the show looping? :)

jscheuer1
08-03-2005, 09:01 PM
You mean like this?

function backward(){
if (which>0)
which--
else
which=photos.length-1
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}

function forward(){
if (which<photos.length-1)
which++
else
which=0
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}

PetFish
08-05-2005, 09:15 AM
Ok, John, that works awesome! I don't know how I can show my appreciation to you and the DD team as well, this site rules! Thanks so much! :)

kdumas
11-26-2005, 04:11 PM
Hi there,

I see that other people have tried to figure out how to get the images to loop on the dhtml slide show script but I haven't found the solution. Can it be looped so that the last picture goes back to the first picture? Or do we have to use the modified script that simply uses a faded out arrow in which case the person will just go backwards. My customer wants it to loop instead of having to go backwards but I'm not sure if it's possible. If there is a thread on how to achieve a loop, please refer the link to me.

Thank you!

jscheuer1
11-26-2005, 06:00 PM
kdumas,

Replace the functions backward() and forward() with the ones in post #22 from this thread, 2 above your post.

mybedhead
12-02-2007, 01:21 AM
here's my site: http://www.mybedhead.net/
The pictures do link but I can not open a new window. I implemented the fix above. I'm using IE 7.

jscheuer1
12-02-2007, 06:37 AM
here's my site: http://www.mybedhead.net/
The pictures do link but I can not open a new window. I implemented the fix above. I'm using IE 7.

No you didn't (from your source code):



function transport(){
window.location=photoslink[which]
}


Ops, my mistake. Try this instead. Edit the line:

window.location=photoslink[which]

to:

window.open(photoslink[which])

mybedhead
12-02-2007, 02:53 PM
Actually I did implement the fix but clicking on the picture resulted in nothing. No link, no new widow. I changed it back because I wanted the pictures to at least link... ( i promised the picture senders) I put the fix back in and you can see the result at www.mybedhead.net. Thanks very much for looking into this and getting back. Really appreciate it...

jscheuer1
12-02-2007, 04:26 PM
Actually I did implement the fix but clicking on the picture resulted in nothing. No link, no new widow. I changed it back because I wanted the pictures to at least link... ( i promised the picture senders) I put the fix back in and you can see the result at www.mybedhead.net. Thanks very much for looking into this and getting back. Really appreciate it...

I think you may need to clear your browser's cache, it is working here now. However, there are other errors on the page:



<body onload="goforit();MM_preloadImages('wrink . . .

goforit() is not defined. It probably is left over from another version of the page but no longer used. If so, get rid of it.

There were also 5 security errors reported, you cannot have references to your local drive on a live page, example:


<link rel="stylesheet" href="file:///C|/Documents and Settings/default/My Documents/MY_BED_HEAD_LOCAL_FOLDER/mm_entertainment.css" type="text/css" />

and:


<script src="file:///C|/Documents and Settings/default/My Documents/MY_BED_HEAD_LOCAL_FOLDER/Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="file:///C|/Documents and Settings/default/My Documents/MY_BED_HEAD_LOCAL_FOLDER/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

and:


<td valign="top"><img src="file:///C|/Documents and Settings/default/My Documents/HUDSON MOON PRE DOMAIN/mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
<td colspan="2" align="left" valign="top"><img src="file:///C|/Documents and Settings/default/My Documents/HUDSON MOON PRE DOMAIN/mm_spacer.gif" alt="" width="304" height="1" border="0" /><br />

Perhaps goforit() is defined in one of the local scripts.

When viewed from your computer, these would perhaps (likely always, if viewing a local version of the page) be valid references. In that case, some other problem with the script opening a new window could be coming from one or more of them.

There could also be other problems.

mybedhead
12-02-2007, 07:03 PM
First of all my apologies for being such a Noob. My page must look like a mess to you... John, you've gone above and beyond and I appreciate it. I went through the portions of the script that you mentioned and I think I changed them. I cleared my cache and I think I eliminated those local links. Allthough I may no longer have a CSS stylesheet attached - not sure... Anyway the problem is still there. Click on a pic - No link, no new window. I guess if it works for everyone but me that might be acceptible.. I'm still here at www.mybedhead.net

jscheuer1
12-02-2007, 07:58 PM
Don't worry too much about the mess on my account, it is something you probably should come to terms with eventually though. Anyways, its' still working here in Opera 9.24, FF 2.0.0.11, and IE 7 under Win XP.

You took care of the errors I mentioned in my last post, but you created a new one:


<body onload=;MM_preloa . . .

should be:


<body onload="MM_preloa . . .

You still may need to clear your browser's cache. If you aren't using one of the above mentioned browsers, which one are you using? And, are you viewing the live page?

mybedhead
12-02-2007, 08:51 PM
Its working for me now!!!! Thanks! You are the man!