|
JavaScript - Alternate Slideshow
Hello All,
I found lightbox to be very useful for certain things, however I was hoping someone could help me out with the code or point me to a tutorial that could do what I am looking for. Similar to lightbox (http://lokeshdhakar.com/projects/lightbox2/) how you can click on an image to open a separate window to display a slideshow, however with lightbox you need to display all images that are included in the slideshow, i.e. thumbnails. I was hoping to find a way to do something similar but without having to display all the images as thumbnails. I want to display only one picture which the user can click on that will open a new window and display a slideshow with multiple images. If this possible? Can someone help me out with this? Any tips or tricks or tutorials that can be shared with me I would greatly greatly appreciate it. Many thanks, bg Similar TutorialsI have written JS , in which I used activex control which does not work on mozila , anyone has idea to to same thing without activex , here is code which just upload the textfile contains on html page . <html> <head> <script type="text/javascript" language="javascript"> function Read() { var Scr = new ActiveXObject("Scripting.FileSystemObject"); var CTF = Scr .OpenTextFile("J:\\Users\\Karimkhan\\Desktop\\2011-03-01.txt", 1, true); data = CTF .ReadAll(); document.write("<pre>" + data + "<pre>"); //alert(data); CTF .Close(); } </script> </head> <body onLoad="Read()"> </body> </html> Hi there, I'm working with leaflet.js to create a web map which is working well so far however I've run into a rookie js problem. I have a js fiddle which shows my code here. The problem I have is that I need convert a string like "polygon" to polygon without the quotation marks. According to the Leaflet API, removeLayer takes an iLayer parameter eg removeLayer( <ILayer> layer ). Currently I'm passing it a string which I feed through eval, I gather is less than ideal. There is a post here on stack overflow but I can't make any sense of the answer unfortunately. If anyone can provide any advice it would be greatly appreciated. Thanks, Rowan Reply With Quote 01-07-2015, 12:50 PM #2 rnd me View Profile View Forum Posts Visit Homepage Senior Coder Join Date Jun 2007 Location Urbana Posts 4,497 Thanks 11 Thanked 603 Times in 583 Posts if you add Code: window.circle=circle; window.marker=marker; window.polygon=polygon; then you can use syntax like layerClicked = window[event.target.value]; instead of eval. you can use a different object than window, as long as it's global and consistent. Hi, Is there away to alternate DIV rows in a specific section. When I try to alternate the DIVs it alternates everything that is a DIV on the page. I want to just alternate a DIV table. Is this possible? Thanks alot Joe I'm trying to make these two messages change every two seconds. I'm not sure if the setInterval needs to be outside of the function. Also, not sure about HTML action"". It's not working and I'm not sure where my mistakes are. Very frustrating. I know it's easy for some of you, please help! <script type="text/javascript"> var curMessage="message1"; var changeMessage="message2"; function adMessage() { if (curMessage) {document.getElementbyId("message").value = "Place your Thanksgiving orders today!"; changeMessage; setInterval ('adMessage()',2000); } else (changeMessage); {document.getElementbyId("message").value = "All orders must be received by November 20th!"; curMessage; setInterval ('adMessage()',2000); } } </script> </head> <body onload="adMessage();"> <h1>Forestville Foods</h1> <h2>Party Platters</h2> <form name="advertising" action="adMessage"> <input type="text" name="message" size="60" value="Place your Thanksgiving orders today!" /> </form> Hello I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes. For example: if select box 1 = a and select box 2 = a then open new window with URL 1 if select box 1 = a and select box 2 = b then open new window with URL 2 if select box 1 = b and select box 2 = a then open new window with URL 3 if select box 1 = b and select box 2 = b then open new window with URL 4 Any help would be greatly appreciated. Thanks Daniel Hey all- I've gotten accustomed to using coda slider 2.0 to do some cool interactive sliding elements on my pages. However, i need something similar that will fade instead of slide. I've searched all over their home forums and it seems like no one there has an answer for how to implement the change in the current codaslider infrastructure. (http://www.ndoherty.biz/demos/coda-slider/2.0/) I need something that has all the functionality of coda slider (easy transitions, div's containing lots of content- both images and text, forward/back buttons, autoplay) but with a fade transitions any ideas? Hi-- I have a quiz embedded on my site that originates elsewhere (QuizRevolution.com) and is embedded on my site via a link (plus some other code), part of that code being in an iframe. The quiz contains YouTube videos that, because of how the quiz is set up by QuizRevolution, will not play in browsers/devices without Flash (for example, the iPad). What I would like to do is put some script on my site that will load a SECOND quiz from QuizRevolution (this one without video) for browsers/devices without Flash. This second quiz will substitute for the first one. Does anyone know how to do this? The tricky part seems to be how I have embedded the quiz in my site, so I have included that part of the page he Code:
<!--QUIZ BEGINS-->
<article id="page_7c">
<div class="box" id="page1">
<a href="#page_1" class="close"></a>
<div class="wrapper pad_bot1">
<div class="grid_16 prefix_4">
<p></p>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMTUzNDA1NTM1MjAmcHQ9MTMxNTM*MDU1NTUwMCZwPTIwNDMyMSZkPSZnPTEmbz*wMWFhMzNjMDI4ZWM*NjNmYTZh/NGU1M2FiNzRmZTZlMSZvZj*w.gif" /> <iframe id=test src="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos" width="380" height="400" frameborder="0" scrolling="no" name="mystudiyoIframe" title="QuizRevolution.com"><a href="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos">test_your_knowledge_about_ufos</a></iframe>
</div>
</div>
</div>
</article>
<!--QUIZ ENDS-->
Many thanks for any help! I am entirely stupid when it comes to coding, so if you could be specific in your suggestions, that would be really terrific. Again, thanks! Hello I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes. For example: if select box 1 = a and select box 2 = a then open new window with URL 1 if select box 1 = a and select box 2 = b then open new window with URL 2 if select box 1 = b and select box 2 = a then open new window with URL 3 if select box 1 = b and select box 2 = b then open new window with URL 4 Any help would be greatly appreciated. Thanks Daniel Hi, I am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweigh...ith-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no success. Any help would be GREATLY appreciated. Here is the code I have: Code: <html>
<head>
<style media="screen,projection" type="text/css">
/* begin gallery styling */
#jgal { list-style: none; width: 400px; position: relative; top: -12px; left: 40px; }
#jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { width: 80px; height: 60px; }
#jgal li.active img { display: block; float: left; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript"> document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init: function () {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
li[0].className = 'active';
for (i = 0; i < li.length; i++) {
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i], 'mouseover', function () {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j = 0; j < im.length; j++) {
im[j].className = '';
}
this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
});
}
},
addEvent: function (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e" + type + fn] = fn;
obj[type + fn] = function () { obj["e" + type + fn](window.event); }
obj.attachEvent("on" + type, obj[type + fn]);
}
}
}
gal.addEvent(window, 'load', function () {
gal.init();
});
</script>
</head>
<body>
<ul id="gallery">
<li><a href="/bmfsweb/esg/image/Vactor Images2/industrial.htm" rel="nofollow" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/2100_PLUS_PD_400w.jpg" alt="2100 Plus PD"></a></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_Plus_Fan_400w.JPG" alt="2100 Plus Fan"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2103_400w.jpg" alt="2103"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/F_Series_400w.jpg" alt="Front Hose Reel Jetter"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/Jetter_shrouded_400w.JPG" alt="Rear Hose Reel Jetter"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_PD_400w.JPG" alt="2100 Classic PD"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_fan_400w.JPG" alt="2100 Classic Fan"></li>
</ul>
</body>
</html>
Again, any help is greatly appreciated. Thanks, Ben. Hey guys, I need help... I want to have this script Code: <script type = "text/javascript">
function runMyJavascript_Caught()
{
// get user to add name
var name_entry = prompt ("Please Enter your Name!", "James");
// declare some short strings
var stating = ", I knew you did it!";
var told = "I told you that I would find out";
var mistake = "I guess you just made a mistake entering your name, ";
var punish = "Now go back to your room";
var heading = "OI Stop";
// construct some longer strings
var stating_name = name_entry + stating;
var mistake_name = mistake + name_entry;
document.writeln(heading.bold() + "<br>");
document.writeln(stating_name + "<br>");
document.writeln(told + "<br>");
document.writeln(mistake_name + "<br>");
document.writeln(punish + "<br>");
}
</script>
write on a button command. What can I use insted of document.write? I am looking to use a similar method as facebook chat does, where it alternates between the original title text and 'friendsName has sent you a message!...' how can I do this ? Hey im looking to get 3 slide shows on 1 website (coded in php). I need the slide shows to all show different images however all change images at the exact same time and have the exact same layout... how can i do this? I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back. Here is the book and the case problem I am on: http://books.google.com/books?id=BeE...page&q&f=false Basically the images is not loading up, or anything is happening. //EDIT : I have the function setup() onLoad in the body ( body onload="setup()" ) Here is my code: FileName: flibrary.js Code: function getStyle(object, styleName) {
if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
} else if (object.currentStyle) {
return object.currentStyle[styleName]
}
}
// step 3
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
if (object.detachEvent)
object.detachEvent("on" + evName, fnName);
else if (object.removeEventListener)
object.removeEventListener(evName, fnName, cap);
}
FileName: slideshows.js Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 6
Case Problem 2
Author:
Date:
Filename: slideshow.js
Global Variables:
scrollButton
References the scrolling button in the slide show
diffX
Stores the horizontal distance in pixels between the
mouse pointer when the scrolling button is clicked
and the left edge of the scrolling button.
Functions List:
setup()
Initializes the contents of the Web page. Creates
event handlers for the mouse and keyboard events
grabIt(e)
"Grabs" the scrolling button to set up the
horizontal scrolling of the slide show
moveIt(e)
Moves the scrolling button horizontally through
the scrollbar
showSlide(x)
Shows the image corresponding the to the x coordinate
on the scrollbar
dropIt(e)
Drops the scrolling button after the user releases the
mouse button
keyShow(e)
Uses the left and right arrow keys to move the scrolling
button through the scrollbar
*/
var scrollButton;
var diffX;
// step 7
function setup(){
scrollButton = document.getElementById("button");
scrollButton.style.top = getStyle(scrollButton,"top");
scrollButton.style.left = getStyle(scrollButton,"left");
scrollButton.style.cursor = "pointer";
addEvent(scrollButton, "mousedown", grabIt, false);
addEvent(document, "keydown", keyShow, false);
}
// step 8
function grabIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
diffX = parseInt(scrollButton.style.left)- mouseX;
addEvent(scrollButton, "mousemove", moveIt, false);
addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
var buttonPosX = mouseX - diffX;
showSlide();
}
// step 10
function showSlide(x){
if(x<20){
x = 20;
}
if(x>299){
x = 299;
}
scrollButton.style.left = x;
var i = Math.floor((x-20)/31);
document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
var evt = e || window.event;
var key = event.keyCode;
var buttonPosX = scrollButton.style.left;
if(key == 37) buttonPosX -= 31;
if(key == 39) buttonPosX += 31;
showSlide(buttonPosX);
}
Code: var mySlideShow = document.getElementById("slideShow");
var imageArray=new Array();
imageArray[0]="url(images/Slide1.JPG)";
imageArray[1]="url(images/Slide2.JPG)";
imageArray[2]="url(images/Slide3.JPG)";
var imageIndex = 0;
var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");
mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";
function changeRight () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 1;
}
console.log(imageIndex);
}
function changeLeft () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex--;
console.log(imageIndex);
}
rightArrow.onclick = function() {
changeRight();
}
leftArrow.onclick = function() {
changeLeft();
}
So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work. Any help would be awesome. Hi, I desperately need a javascript slideshow that does the following: 1--shows still images with thumbnails 2--can be played manually or automatically 3--can embed youtube videos 4--audio can accompany slideshows 5--powered by javascript, not Flash so it shows up on iPad Does anyone know where I can get such a slideshow? Thanks Hello. I was wondering where I can find something like this: It's a slideshow. I need one for my site. Thank you. hi evey one I need a slideshow like this website . zbiddy.com as you can see , in the top of the page is a slide show . I just need a slideshow that change the content of each slide . I've made my content for each slide and just need a script that change these content I need your help very much Thanks I worked a lot with a friend to change the code, and it's almost there. The next and last buttons still work. The Start buttons is titled 'wri' and the latest button is titled 'end'. The end button does not work. Before I added the end button, the start button worked, but now it sends you to the image alt. Any ideas on what went wrong? Code: window.onload = initLinks;
var myPix = new Array("comic/Issue1_Page00.gif","comic/Issue1_Page01.gif","comic/Issue1_Page02.gif");
var thisPic = 0;
function initLinks() {
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
function processPrevious() {
if (thisPic == 0) {
thisPic = myPix.length;
}
thisPic--;
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
function processNext() {
thisPic++;
if (thisPic == myPix.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
// Load Images
if (document.images) {
writeImg = new Image();
writeImg.src = (comic/Issue1_Page03.gif);
}
function imgOn(imgName) {
if (imgName == 'end') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}
return false;
}
// Load Images
if (document.images) {
writeImg = new Image();
writeImg.src = (comic/Issue1_Page00.gif);
}
function imgOn(imgName) {
if (imgName == 'wri') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}
return false;
}
I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in. Here is the HTML for the area that holds the images Code:
<div id="imageBox">
<!-- Random Images -->
<img src="images/image1.jpg" width="200" height="200" alt="School Images" id="randImage" />
</div>
and here is the external .js file for it Code:
window.onload = pics;
var thisPic = 0;
var schoolImages = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg");
function pics(){
thisPic = Math.floor((Math.random() * schoolImages.length));
document.getElementById('randImage').src = schoolImages[thisPic];
cycle();
}
function cycle(){
thisPic++;
if(thisPic == schoolImages.length){
thisPic = 0;
}
document.getElementById('randImage').src = schoolImages[thisPic];
setTimeout(cycle, 3 * 1000);
}
I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads. Does anyone see any issues to what is making this not work correctly now? |
|||||||