|
JavaScript - Want To Create A Clickable Slideshow Similar To This One
I have created a slideshow before but I want to create a slideshow where a person clicks on a link and it goes to a certain picture which might have one or more links embedded into the picture something like this:
http://www.myeloma.org.uk/ any guides on how to do this? help much appreciated Similar TutorialsMy slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you. Shawnel <head> <style type="text/css"> .style1 { vertical-align: top; } </style> </head> <script type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="Images/Picture Box/PictureBox1.jpg" var image2=new Image() image2.src="Images/Picture Box/PictureBox2.jpg" var image3=new Image() image3.src="Images/Picture Box/PictureBox3.jpg" var image4=new Image() image4.src="Images/Picture Box/PictureBox4.jpg" var image5=new Image() image5.src="Images/Picture Box/PictureBox5.jpg" //--> </script> <body style="margin-top: 0"> <a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a> <script type="text/javascript"> <!-- var step=1 var whichimage=1 function slideit(){ if (!document.images) return document.images.slide.src=eval("image"+step+".src") whichimage=step if (step<5) step++ else step=1 setTimeout("slideit()",3000) } slideit() function slidelink(){ if (whichimage==1) window.location="learnmore.htm" else if (whichimage==2) window.location="contactus.htm" else if (whichimage==3) window.location="hungerheroes.htm" else if (whichimage==4) window.location="donate.htm" else if (whichimage==5) window.location="volunteer.htm" } //--> </script> So i purchased a template from template monster for wordpress. http://www.templatemonster.com/demo/28861.html On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link. My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain. --------------------------------------------------------------------- <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> ------------------------------------------------------------------------ Full code below <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" /> </a> <div class="caption"> <div class="indent1">in grey</div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" /> </a> <div class="caption"> <div class="indent1">in grey </div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li class="last"> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> </ul> </div> </div> </div> I have called a table through XML with four fields. One of them is Excel file name. I like to make a clickable link with Excel file name to open it. XML code: Code: <?xml version="1.0" encoding="ISO-8859-1" ?>
<searchable_index>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
<item name="Ana" title="Data" link="doc\ana.xls">Member</item>
</searchable_index>
Javascript code
document.write('<table border="1" style="width: 100%;">');
document.write('<tr><th>name</th><th>title</th><th>link</th></tr>');
for(var i=0; i<results.length; i++) {
document.write('<tr>');
document.write('<td>' + results[i].getAttribute("name") + '</td>');
document.write('<td>' + results[i].getAttribute("title") + '</td>');
document.write('<td>' + results[i].getAttribute("link")" > + '</td>'); //<a href="url">Link text</a>
document.write('</tr>');
}
document.write('<table>');
document.close();
Been looking around for 3 days now, I found exactly the style that I want, have images on my web site, all I need is for someone to show, explain to me how exactly this pagination or whatever it is works, how do i select which actual images from my site or where to be shown in the main window and also the thumbnails below???? as I said, I already know what kind of slide show I want, it's in this link the lower right version of slideshow with the pics of two horses and stuff: http://www.dynamicdrive.com/dynamici...tentslider.htm I already have the script on my site but but can't figure out how to place my images: http://www.vytasornamental.net/page2.html and I want THUMBNAILS on the bottom like in the first link.... not the text Thread Closed
I would like to ask people's opinions as to which "offline" language is most similar to javascript? I don't program for a living, but I have been learning javascript in my spare time. I would now like to have a shot at making a desktop application, and I think it would help to choose one which is most similar, if at all possible, to javascript? e.g. python, ruby, C#, visual basic ... I have no idea and haven't had much luck googling this Thanks Matt Hi, I need to allow some other websites to show certain portions of my website as though it were part of theirs. Simplest way would be in an iframe, but I would prefer to make the content available similar to the google map api where something like this is included in the header:- Code: <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=blahblahblah" type="text/javascript"> </script> and in the body something like this:- Code: <div id="map" style="width: 740px; height: 520px; margin: 5px 0px 20px 0px; padding: 5px; border: 3px solid #FFDD00;"></div> So I am guessing that something in the file being called in the src of the script tag is replacing the div with id="map" with other contents. Can someone give me a simple example of doing this? Thanks. Hello, I have the code in the annexe wich is working but grossly redondant, clearly, I would like to have only one function toggleEditor(), that would manage the global variables editInstance with a parameter or something equivalent to avoid having 2 twin like functions. Thanks for your suggestions. HJS Annexe : Code:
<html>
<body>
<script src="../flovinax.js" type="text/javascript"></script>
<script>
var editInstance= null;
function toggleEditor1(edtN) {
if(editInstance===null) {
editInstance = new flovinaxa({fullPanel : true}).panelInstance(edtN);
} else {
editInstance.removeInstance(edtN);
editInstance= null;
}
}
var editInstance2= null;
function toggleEditor2(edtN) {
if(editInstance2===null) {
editInstance2 = new flovinaxa({fullPanel : true}).panelInstance(edtN);
} else {
editInstance2.removeInstance(edtN);
editInstance2= null;
}
}
</script>
<div>
<textarea style="width: 800px; height: 200px;" id="myArea"></textarea>
<br />
<button onClick="toggleEditor1('myArea');">+</button>
</div>
<div style="clear: both;"></div>
<div>
<textarea style="width: 800px; height: 200px;" id="myArea2"></textarea>
<br />
<button onClick="toggleEditor2('myArea2');">+</button>
</div>
<div style="clear: both;"></div>
</body>
</html>
Hello all i need to be able to make small peace of js code that the user can drag to is IE browser and then invoke it on the page . So what I'm actually refering to is something similar to facebooks sign up page. Where you have a form and you start typing the name of a high school or college and they automatically match what your typing in a drop down window. Here's an example pictu Any help pointing me in the right direction would be outstanding. Also I am pretty sure this is javascript, so I figured this was the right section for it. Thanks in Advance, Ryan Hi There, I really need your help. I am aware that there is no isDate() function for javascript, however, how could one check a date against a validator to ensure that the date entered is either returned true or false the date format that I would like to check would consist of the dd/mm/yyyy so essentially: isDate("12/01/2012") would return as true isDate("N/A") = would return as false I have searched high and low and am counting on the experts on this forum for some major help. A huge thanks in advance and I really appreciate everything. Cheers, Jay http://www.premierleague.com/page/Ga...047853,00.html
I have searched for a rotating image script to use at mrsgriffins.com and am currently using Tony Foster's Picture Cube slideshow downloaded from javascript.com. This is EXACTLY the effect I wanted, but it only works with IE since it uses MS-only code. Is there a similar script that is more universal? Thanks for any help! I have created a program that works great but sometimes it does not finish. It is the exact same as the one we see in this forum when you want to insert an image into a forum post. The program takes in a users image url through prompt, then regenerates the information within the textbox with [img] tags. The problem is I try to do this once and it will work great, but then I will try it again and fill out all of the information the exact same way and nothing happens. By nothing happens I mean after I hit enter the text box will remain empty with no regenerated code. But if I do a page refresh it works. That leads me to believe there is nothing wrong with my code b/c I do it once and get a sound result, then again and get nothing. Anyone have any experience with broken programs like this before or any words of advice? PHP Code: <script language="javascript"> function imgGenerator(){ var question=confirm("Share a Picture?"); if (question==true){ var obj=document.getElementById("mngl-board-post-input"); var imgurl = prompt('To Share an image paste the image url here \nSupport .jpg .jpeg .gif .bmp and .png'); if (imgurl == "" || imgurl == null) {return false;} var txt=document.createTextNode("[a][img]"+imgurl+"[/img][/a]"); obj.appendChild(txt); } else {} } </script> PHP Code: <a href="javascript:void(0);" onClick="imgGenerator();"><img src="http://instride.org/images/image.png" alt="Share an Image" /></a> The code I will am including is far from finished, but some of what I do have works (the "submit" code does not work yet). I am able to prevent certain kinds of input including Shift-Ins pasting, but Ctrl-v pasting still works (and I do not want it to). Could you please tell/show me what code needs to be entered to my existing functions, or what new function I need to create (and call from my existing functions) to eliminate any kind of CtrlKey input? Thanks in advance, mitchellA <code> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Mitchell's Test Form </title> <meta name="Generator" content="Alleycode HTML Editor"> <meta name="Description" content="Your description here..."> <meta name="Keywords" content="Your keywords here..."> <script type="text/javascript"> function is_it_A (e) {// allows only a-z, A-Z, <backspace>, <space>, apostrophe, and hyphen var a; document.all ? a = e.keycode : a = e.which; return ((a > 64 && a < 91) || (a > 96 && a < 123) || a == 8 || a == 32 || a == 39 || a == 45); } function is_it_P (w) {// allows only a-z, A-Z, 0-9, <backspace>, hyphen, and underscore var p; document.all ? p = w.keycode : p = w.which; return ((p > 47 && p < 58) || (p > 64 && p < 91) || (p > 96 && p < 123) || p == 8 || p == 45 || p == 95); } function is_it_N (i) {// allows only 0-9, <backspace> var n; document.all ? n = i.keycode : n = i.which; return ((n > 47 && n < 58) || n == 8); } function is_it_T (p) {// allows only 0-9, <backspace>, <right & left brackets()>, and hyphen var t; document.all ? t = p.keycode : t = p.which; return ((t > 47 && t < 58) || t == 8 || t == 40 || t == 41 || t == 45); } function is_it_E (m) {// allows only 0-9, a-z, A-Z, <backspace>, hyphen, <period (.)>, <at (@) sign>, and underscore var e; document.all ? e = m.keycode : e = m.which; return ((e > 47 && e < 58) || (e > 64 && a < 91) || (e > 96 && a < 123) || e == 8 || e == 45 || e == 46 || e == 64 || e == 95); } function xA (str) { return str.replace (/[^a-z\'\-\ ]/gi,""); } function xN (str) { return str.replace (/[^0-9]/gi,""); } function xT (str) { return str.replace (/[^0-9\(\)\ ]/gi,""); } function xE (str) { return str.replace (/[^a-z\0-9\-\_\.\@\_]/gi,""); } function validateFormOnSubmit (theForm) { var f=document.forms["theForm"]["fname"].value var l=document.forms["theForm"]["lname"].value var p=document.forms["theForm"]["pwd"].value var e=document.forms["theForm"]["eml"].value if (f==null || f=="") { fld.style.background = "red"; alert = ("Please enter your First Name."); return false; } else if (l==null || l=="") { fld.style.background = "red"; alert = ("Please enter your Last Name."); return false; } else if (p==null || p=="") { fld.style.background = "red"; alert = ("Please enter your Password."); return false; } else if (e==null || e=="") { fld.style.background = "red"; alert = ("Please enter your e-mail address."); return false; } else { fld.style.background = "white"; } } </script> </head> <body> <CENTER> <FORM name="theForm" onsubmit="return validateFormOnSubmit ()"> <H1>Please supply the following data...</H1> <br /> <FONT size="5"> <label for="fname">First Name: </label><INPUT type="text" onkeypress="return is_it_A(event)" onblur="this.value=xA(this.value)" name="firstname" id="fname"><br /> <br /> <label for="lname">Last Name: </label><INPUT type="text" onkeypress="return is_it_A(event)" onblur="this.value=xA(this.value)" name="lastname" id="lname"><br /> <br /> <label for="pwd">Password: </label><INPUT type="text" onkeypress="return is_it_P-(event)" onblur="this.value=xA(this.value)" name="password" id="pwd"><br /> <br /> <label for="eml">E-mail Address: </label><INPUT type="text" onkeypress="return is_it_E(event)" onblur="this.value=xA(this.value)" name="email" id="eml"><br /> <br /> <input name="info" type="submit" value="Done>>"> </font> </CENTER> </FORM> </body> </html> </code> Hello Coding Forums, I am working on building a watch app for the Pebble smartwatch that works in combination with a Bluetooth light bulb that could trigger on and off functionality. I have bits of the source code from a the same bulb project someone started from another site that is coded Java, so I imported them into cloud pebble their java library. I've been working on this since last year and I'm wondering what at all could I be doing wrong. I get the "cards" to show up, but as far as a connection to the bulbs I have not established that yet. I've attached my source code and if anyone has any time to give me some pointers that would be appreciated massively. I know that Hubble worked on a similar project, to control lighting from a pebble smartwatch so I know it can be done. I've even tested this code with other developers who are experienced and they are also wondering why the connection does not take place. It would be really neat if I got this to work. Thank you everyone. Attached Thumbnails I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button: Code: <input type="button" value="Preview" onClick="popupform();"> works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry). When I substitute Code: <input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();"> everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found. The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff. Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php) Thanks in advance. Hi, I need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo I have created this svg color picker : Edit fiddle - JSFiddle I want that each color can be clicked and if each of them clicked, it will rotate the selected image to the top while the rest of the color will be moved accordingly clockwise (like a wheel). I have a situation in which I have to track clicks (links etc..). The problem is, I have a larger div ie - parentDiv - like 300px height, 400px width - approximate. This div has a background image. Now, the issue arises because over this div (parentDiv), I have another div "announceDiv" on top of it showing information. I ONLY want the parts of parentDiv that is NOT covered by announceDiv to be clickable. Just to reiterate, I have a big div that I want clickable (so I can add a link to the click), but over this big div I have a smaller div showing content ie, information, that links to its own stuff. BUT I want to be able to link from this background image that is in the parentDi without affecting when I click in the smaller div that is superimposed over it. any ideas? has to work in ie6+ and ff 3+ |
|||||||