|
JavaScript - Editing A Slideshow To Open Image Links In The Default Browser Window
Let me start of by saying that I'm a designer, not a programmer so I'll apologize in advance for having very little knowledge of javascript.
I found a free script for a auto-advancing slideshow that allows you to give each image in the slideshow a unique link. My problem is that when you click on one of the pictures the link opens in a new window instead of loading in the default browser window. I have tried to search google for an answer but my lack of javascript knowledge has left me scratching my chin. Here's the code in the head of my page: Code: <script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
and here's the Body code: Code: <script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("images/services/3d_meter.jpg", "images/services/3d_prototype.jpg", "images/services/3d_stage_renderings.jpg", "images/services/atsite.jpg", "images/services/netstar.jpg", "images/services/photo_manipulation.jpg", "images/services/powerpoint.jpg")
slideshowlinks("/", "/", "/", "/", "/", "/", "/")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=8000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
fooling around with it, I think I have determined that my problem is the window.open in the function gotoshow, but again, I'm a designer who has little knowledge of how this actually works. If it helps, here is a link to my site where I have the slideshow, http://gravescreativedesign.com/services.html All of the images link to the index page for my site at the moment for testing purposes, but these images will eventually link to different urls within my portfolio section of my website. Similar TutorialsHi, I am working with the Cut & Paste JavaScript Slideshow which you can find on http://javascriptkit.com/script/script2/jsslide.shtml . The images are linked to a page on the Internet (click on image1 to go to "page1", click on image2 to go to "page2", etc.) which is a nice feature! However, the link opens in a new window. Could anyone tell me what I have to do to 'force' the link to open in the same window (target="_self")? Thank you for your help! I really appreciate it. WWWolf - Belgium Does anyone know the default size of a popup window when using window.open()? Thanks Hi Ive found out how to force another browser window to open at a certain size when a link is clicked. Here's the whole line of code including the layer, the javascript and the image, <div id="Layer6" style="position:absolute; width:10px; height:8px; z-index:6; left: 561px; top: 310px"><a href="javascript:;" onClick="MM_openBrWindow('navigation%20instructions.htm','','width=50,height=50')"><img src="images/info.gif" width="15" height="15" border="0"></a></div> How do I adapt this so I can also specify the x&y co-ordinates of the opened window relative to the window that launched it. thanks alot Masten I am completely a beginner at coding and really do not know much right now. This is the day of week link rotation script which works just great: Code: <script type="text/javascript">
<!--
var MyEveryDayLinks = [
['Sunday', 'http://www.google.com', 'Google'],
['Monday', 'myURL', 'LinkName'],
['Tuesday', 'myURL', 'LinkName'],
['Wednesday', 'myURL', 'LinkName'],
['Thursday', 'myURL', 'LinkName'],
['Friday', 'myURL', 'LinkName'],
['Saturday', 'myURL', 'LinkName']
];
var today = new Date();
var L = today.getDay();
document.write('Today is ' + MyEveryDayLinks[L][0] + '. My daily
URLs: <a href="' + MyEveryDayLinks[L][1] + '">' +
MyEveryDayLinks[L][2] + '<\/a>.') ;
// -->
</script>
Unfortunately I can't open urls in a new window. I would so like this to work...but don't know why i can't make it work. I've tried something like this with no luck...any ideas?: Code: <a href="javascript:[window.open(' + MyEveryDayLinks[L][1] + ', 'height=200, width=200',)];">' + MyEveryDayLinks[L][2] + '<\/a>.') ;
Hi! I need to open a window when: 1 user leaves the site 2 when the browser is closed. I tried the 'unLoad' event but it works only for the user leaves site case and not the browser close. Here is the code I tried: <html> <head> <title>Detecting browser close </title> <script type="text/javascript"> function doUnload() { myWin= open("exit_site.php", "exitWin", "width=50,height=50"); } </script> </head> <body onunload="doUnload()" <h4>Close browser!</h4> </body> </html> Neep your help, please I have found this Alarm Clock from JavaScript Kit and when the alarm time is reached it redirects to the URL entered. I would like to keep the alarm clock running, have it open a new window for the entered URL such as (Target="Blank") in HTML. Can someone help? var jsalarm={ padfield:function(f){ return (f<10)? "0"+f : f }, showcurrenttime:function(){ var dateobj=new Date() var ct=this.padfield(dateobj.getHours())+":"+this.padfield(dateobj.getMinutes())+":"+this.padfield(dateo bj.getSeconds()) this.ctref.innerHTML=ct this.ctref.setAttribute("title", ct) if (typeof this.hourwake!="undefined"){ //if alarm is set if (this.ctref.title==(this.hourwake+":"+this.minutewake+":"+this.secondwake)){ window.location=document.getElementById("musicloc").value } Hi I am a new bie to Javascript programming. We have a scenario to launch a new browser window for a given HTML. I have the following approaches : Approach 1: my_window = window.open("", "report"); my_window.document.open(); my_window.document.write("<HTML> <BODY> HI </BODY></HTML>"); my_window.document.close(); Approach 2: var newWindow = window.open("", "report"); newWindow.document.body.innerHTML = "<HTML> <BODY> HI </BODY></HTML>"; Could anyone sugges Which is the correct approach ? Our requirement is to have this code to work in any browser? Thanks Instead of using window.open, which I understand opens a new window, is there a code that will make the link open in the parent window?
Hi, How can I set the following widget so it opens the links (pages) in a new window? Code: <SCRIPT charset="utf-8" type="text/javascript" src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822/US/oweg0a-20/8018/9000c5f7-9ce1-4eb6-887f-0491e54add7d"> </SCRIPT> <NOSCRIPT><A HREF="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Foweg0a-20%2F8018%2F9000c5f7-9ce1-4eb6-887f-0491e54add7d&Operation=NoScript">Amazon.com Widgets</A></NOSCRIPT> Thanks in advance! Regards Rain Lover I need help turning the following inline code: Code: <a href="http://www.bing.com/" name="bing" onclick="return !window.open(this.href)">Bing</a><br> <a href="http://www.lycos.com/" name="lycos" onclick="return !window.open(this.href)">Lycos</a><br> <a href="http://www.dogpile.com/" name="dogpile" onclick="return !window.open(this.href)">DogPile</a><br> into an external javascript function that will do the same thing (open all links in a new window individually if javascript is enabled, without destroying links in html for if javascript is not enabled). Any smarties out there have any good suggestions? I have an emagazine i want to add to my website, the probelm is when it opens in a browser you have to sroll down the page, to view it all, what i was wondering is, is it possibe to create a link that when somebody selects to view the magazine it forces the browser to openin full screen mode so that it fits niely on the screen without the toolbars and evertything taking up half the page. Thanks Hi there, I am trying to open some SWF videos from an HTML page. When the user clicks the link, I would like to have the videos open in a transparent window (not a separate browser wndow). I have figured out how to embed the files and have them open in a transparent window as soon as you load/refresh the page but I want to open the SWF using a link. Any suggestions? Thank you all. B Hello all,I have a website and I would like a pop-up window to promote a new website venture I have. I would like for the new website to open in a completely new window/browser when my members simply click on the index page (No link or Buttons).The code below does most of what I ask lol,but it.. 1.Only opens in a new tab (in same browser) while I would like for it to open in a completely new browser "full page" menu bar scroll tab and all. plus 2.It seems to open each and every time the page is clicked,which will be annoying to my members.I would only like for it to open 1 time per visitor every 24 hours or whenever cookies are cleared. Code: <html>
<head>
<script type="text/javascript">
function click_on()
{
window.open("URL HERE", "_blank");
}
</script>
</head>
<body onclick="click_on()">
</body>
</html>
I am no expert at this,and my knowledge is very limited,so excuse me if this is a simple situation.Any help would be greatly appreciated. Thanks, Roco Hi all, I'm new to the forum and new to javascript. I have a main image with two thumbnails underneath. When you click on the thumbnail it makes that into the main image. I now want to be able to click on the main image to open a new window with the full size. I can do both seperatly but when I try to put them together the open window only works on the first image, when you click a thumbnail they won't open into a new page. http://www.blockdesigns.co.uk/Product1.php?Sku=20097 P.S all my data and images are recieved using php and the thumbnail is a swap connent that also uses an external php file. Any advice or a point in the right direction would be great. Thank you. Hello, I use the following script for my rotating images with links and would like to know if there is a way to have the links display in a new window: Code: <script type="text/javascript"> var preload_ctrl_images=true; //And configure the image buttons' images he var previmg='left.gif'; var stopimg='stop.gif'; var playimg='play.gif'; var nextimg='right.gif'; var slides=[]; //FIRST SLIDESHOW //configure the below images and descriptions to your own. slides[0] = ["http://jpl.coj.net/pics/nav/home2/beaches-anniversary.jpg", "", "http://jaxpubliclibrary.org/progs/jb/25th-anniversary.pdf"]; slides[1] = ["http://jpl.coj.net/pics/nav/home2/young-author-visit.jpg", "", "http://jaxpubliclibrary.org/progs/mh/writers-express.pdf"]; slides[2] = ["http://jpl.coj.net/pics/nav/home2/jea-green.jpg", "", "http://jaxpubliclibrary.org/progs/jpl/home-energy-evaluation.html"]; slides[3] = ["http://jpl.coj.net/pics/nav/home2/tropic-cancer.jpg", "", "http://jaxpubliclibrary.org/progs/main/tropic-cancer.pdf"]; slides[4] = ["http://jpl.coj.net/pics/nav/home2/childrens-summer-reading.jpg", "", "http://jpl.coj.net/kids/kids-summer-reading2011.pdf"]; slides[5] = ["http://jpl.coj.net/pics/nav/home2/teen-summer-reading.jpg", "", "http://jpl.coj.net/teens/teens-summer-reading2011.pdf"]; slides[6] = ["http://jpl.coj.net/pics/nav/home2/harry-potter.jpg", "", "http://jpl.coj.net/progs/jpl/harry-potter-programs.pdf"]; slides[7] = ["http://jpl.coj.net/pics/nav/home2/internet-safety.jpg", "", "http://jaxpubliclibrary.org/Training/Internet-Safety/internet-safety.html"]; slides[8] = ["http://jpl.coj.net/pics/nav/home2/zines-art-walk.jpg", "", "http://jaxpubliclibrary.org/progs/main/zine-month.pdf"]; slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed //above slide show uses only the defaults </script> <script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript"> </script> Thanks for your help, Elbee window.open() doesn't open an entirely new window in FF3.6, just a new tab suggestions? Edit: Yeah, ok, so if i specify a size smaller than the current standard window, it'll be forced to open a new window. but what if i want a new standard sized window to open entirely? and in any case, i wan t amore direct solution where possible, thanks. Hi I have copied and adapted the commonly found switchmenu script available widely on the web from Dynamic Drive. I understand that it might be dated now, but I am limited as to what I can do. Specifically, this code has to sit in a webpart within Sharepoint 2003, so no referencing external CSS or js files. The code below functions as desired, and opens the items one at a time, closing the previous before opening the next. However, what I want to do is have the first item default to being open. Any pointers? putting a onload in a body tag isn't an option (this code is popping into a webpart in sharepoint, so no access to the body tag). Many thanks -------------------------- <script type="text/javascript"> var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc) var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only if (document.getElementById){ //DynamicDrive.com change document.write('<style type="text/css">\n') document.write('.submenu{display: none;}\n') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change if(el.style.display != "block"){ //DynamicDrive.com change for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") //DynamicDrive.com change ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script> What I'm trying to do is to do something similar to what this person wanted on their question: http://www.webmasterworld.com/javascript/3338586.htm I already have it so when the user clicks on one of the links, then it changes to the active class. But now I would like to have the first link already have the active class (which is the effect the links will have when the user clicks on it) and then have the same effect happen thereafter the user clicks on the links. Here is the Javascript: Code: <script type="text/javascript">
var hrefs=document.getElementsByTagName("a");
var hrefs=document.getElementsByClassName("links");
var preA="";
for(var i=0;i<hrefs.length;i++){
hrefs[i].onclick=function(){
if(preA!="" && preA!=this){
preA.className="links";
}
this.className="active";
preA=this;
}
}
</script>
Here is the CSS: Code: a.links:link {
color: #FFF;
text-decoration: none;
}
a.links:hover {
color: #96C;
text-decoration: none;
}
a.active {
color: #96C;
text-decoration: none;
}
Here is the HTML: Code: <a class="links" href="#">Curriculum Vitae</a> | <a class="links" href="#">Teaching Philosophy</a> | <a class="links" href="#">Artist Statement</a> |
|||||||