Jump to content

Search the Community

Showing results for tags 'Slideshow'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. I am a photographer and built my site useing a CSS Slideshow and am trying to figure out the SEO. Will the alt tag be crawled like this or no? Thanks for any and all help! CSS #site_Wrapper #allSlide_Wrapper #slide_Wrapper_retouch li:nth-child(1) span{ background-image:url(/images/retouch/rt_001.jpg);}#site_Wrapper #allSlide_Wrapper #slide_Wrapper_retouch li:nth-child(2) span{ background-image:url(/images/retouch/rt_002.jpg); -webkit-animation-delay: 10s; -moz-animation-delay: 10s; -o-animation-delay: 10s; -ms-animation-delay: 10s; animation-delay: 10s;} HTML <div id="slide_Wrapper_retouch"> <li><span>Image 01</span><alt="Before and After of Maggie Wakim. Full glamour photo retouching done in house at Andrew Gallagher Studios. Photographed in Achusnet, Massachusetts."></li> <li><span>Image 02</span><alt="Before and After of Taylor Kinzler. Full glamour photo retouching done by Andrew Gallagher Studios. Photographed in studio Lakeville, Ma."></li> <li><span>Image 03</span><alt="Before and After of Jillian Zucco. Full glamor photography retouching done by Andrew Gallagher Studios. Photographed downtown New Bedford, Massachusetts."></li> <li><span>Image 04</span><alt="Before and After of Stephanie Vegliante. Full glamor photography retouching done by Andrew Gallagher Studios. Photographed in studio North Dartmouth, Massachusetts."></li> <li><span>Image 05</span><alt="Before and After of Marlena Johnson. Full glamor photography retouching done by Andrew Gallagher Studios. Photographed downtown New Bedford, Massachusetts."></li> <li><span>Image 06</span><alt="Before and After of Maggie Wakim. Full glamor photography retouching done by Andrew Gallagher Studios. Photographed downtown New Bedford, Massachusetts."></li> <li><span>Image 07</span><alt="Before and After of Taylor Kinzler. Full glamor photography retouching done by Andrew Gallagher Studios. Photographed in studios Lakeville, Massachusetts."></li> <li><span>Image 08</span><alt="Before and After of Olivia Marques. Full glamor photography retouching done by Andrew Gallagher Studios. Photographed downtown New Bedford, Massachusetts."></li> <li><span>Image 09</span><alt="Before and After of Joclyne Nunes. Full glamor photography retouching done by Andrew Gallagher Studios. Photographed in studios N. Dartmouth, Massachusetts."></li> </div>
  2. Hi On this page, i have slideshow aligned left side; i want to align this in center; can you please help http://genobilebrothers.com Many Thanks!
  3. Hi, First, i need to tell you that i am not experienced in CSS or coding myself but i have fairly good overall technical knowledge. I'm in need of a very simple full screen slideshow consisting of 4 images. I found a CSS3/javascript for this here: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ I've tried to tweak it a bit to suite my needs. However, its not really optimal. I would like to change it so it doesnt fade between the images, a fast cut would be better. Also the original was for 6 images but i tried to change it to a 4 image slideshow but im not sure i did it correctly. Can someone help me with these two issues? thanks guys! the HTML looks like this: <!DOCTYPE html><!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--><!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]--><!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]--><!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]--><!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Claires slideshow Screen 1</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" /> <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style1.css" /> <script type="text/javascript" src="js/modernizr.custom.86080.js"></script> </head> <body id="page"> <ul class="cb-slideshow"> <li><span>Image 01</span><div></div></li> <li><span>Image 02</span><div></div></li> <li><span>Image 03</span></div></li> <li><span>Image 04</span><div></div></li> </ul> </body></html> and the CSS looks like this: .cb-slideshow,.cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; }.cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 72s linear infinite 0s; -moz-animation: imageAnimation 72s linear infinite 0s; -o-animation: imageAnimation 72s linear infinite 0s; -ms-animation: imageAnimation 72s linear infinite 0s; animation: imageAnimation 72s linear infinite 0s; }.cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }.cb-slideshow li:nth-child(2) span { background-image: url(../images/2.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; }.cb-slideshow li:nth-child(3) span { background-image: url(../images/3.jpg); -webkit-animation-delay: 36s; -moz-animation-delay: 36s; -o-animation-delay: 36s; -ms-animation-delay: 36s; animation-delay: 36s; }.cb-slideshow li:nth-child(4) span { background-image: url(../images/4.jpg); -webkit-animation-delay: 54s; -moz-animation-delay: 54s; -o-animation-delay: 54s; -ms-animation-delay: 54s; animation-delay: 54s; }/* Animation for the slideshow images */@-webkit-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-moz-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-o-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-ms-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }} /Joel
  4. Hello everyone, I am trying to create a simple slideshow to learn javascript and a small amount of PHP. People are meant to simply upload a photo to their site using for example Filezilla. The website should automaticly take the photo into the slideshow. I am still very novice though. So far I got: + PHP to read the file names in the folder. + Javascript to take over the PHP Array. That is not much.. but I already run into a mistake in the next part. <?php $PhotoSlideAll = scandir('./photos'); $PhotoSlide = array_diff($PhotoSlideAll, array('.', '..'));?> <script> var SlideShow = ["<?php echo join("", "", $PhotoSlide); ?>"]; var SSl=SlideShow.length - 1; var picture = "'../photos/" + SlideShow[0] + "'" document.getElementById("backgroundswitch").style.backgroundImage = "url(picture)";</script> Now somehow, it doesn't actually change the background. Whilst the variable picture is really '../photos/PHOTONAME.jpg' when I use an Alert to test it. Edit: Thank you in advance
  5. Hi, i am new to javascript and would like some code to turn my pictures into a slideshow.Anyone with some help please?
  6. Hello internet. I am using the following code and I have not been able to write in a stop function. Nothing I have tried works. Please help. HTML<div class="slides"><img src="photo1.jpg" name="slide" width="180" height="180" /><script type="text/javascript">slideit()</script></div></div> JAVASCRIPTvar image1=new Image()image1.src="photo1.jpg"var image2=new Image()image2.src="photo2.jpg"var image3=new Image()image3.src="photo1.jpg"var step=1function slideit(){if (!document.images)returndocument.images.slide.src=eval("image"+step+".src")if (step<3)step++elsestep=1setTimeout("slideit()",2500)}
  7. Hey there. I sincerely hope I won't have to bother you good folks again for quite a while after this, but there is one more problem I'm having with my slideshow. I found a site that supplies open-source slideshow code, and found a great show that fit my needs. However.......my client wants users to be able to make the slideshow full-screen, which isn't an option for the code. I've seen this functionality at sites like Photobucket, but I have no idea how to do it myself, as I am only a beginner in Javascript. I have asked about this at the site that supplied the code, but have had no luck getting a response so far. So it looks like I may have to find another way, after all. The site's slideshow code is rather complex and long, so I won't post it here unless some brave soul wants to trudge through it. My question is this: how would I make that an option? Is there some general guideline for toggling full-screen on a Javascript slideshow? Any help would be greatly appreciated. Thank you for your time.
  8. Hey there. I'm almost ready to launch my client's site, and there is one last problem with the current slideshow. <script type="text/javascript"> var imgSlide;var pic = 0;window.onload = function (){ imgSlide = document.getElementById('img'); // preload imagesimages = new Array();images[0] = new Image();images[0].src = "image1.jpg";images[1] = new Image();images[1].src = "image2.jpg";images[2] = new Image();images[2].src = "image3.jpg"; } function slide(){imgSlide.src = images[pic].src;if(pic < 2) // images.length - 1 can be used here{pic++;}else{pic = 0 }timer = setTimeout(slide, 5000);} function prev(){if(timer)stopSlide(); if(pic == 0){ pic = 2; imgSlide.src = images[pic].src;}else{pic--;imgSlide.src = images[pic].src;}} function next(){if(timer)stopSlide(); if(pic == 2){ pic = 0;imgSlide.src = images[pic].src;}else{pic++;imgSlide.src = images[pic].src;} } function stopSlide(){clearTimeout(timer);} </script> My problem is this: I need to hyperlink the images, so that each one will take the user to a certain page. I have seen variations of this function in different places, but I'm just not sure how to apply it to this code in particular. I'm sure it's a relatively simple fix, but I've looked at so many different JS codes today that my brain is a little scrambled.If someone could at least point me in the right direction, I would be very grateful.
  9. Hey there! I'm looking to build a slideshow for my site, and I was wondering what would be the best way to go about it. All I really need are the basic buttons (start, stop, forward, backward) and the capability to cycle through a LOT of pictures. Any advice would be greatly appreciated!
  10. var curPic = 0;var fadeTimer;var opacStep = 0.5;var curOpac = 10;var dirn = -1; function autoImage(){ if(fadeTimer){clearInterval(fadeTimer);} fadeTimer = setInterval(setOpacity,100); function setOpacity() { curOpac += opacStep * dirn; if (curOpac < 0){ swapImage(); curOpac = 0; dirn = 1; autoImage(); return; } if (curOpac > 10){ curOpac = 10; clearInterval(fadeTimer); dirn = -1; return; } if (document.getElementById("img").style.opacity=="string"){ document.getElementById("img").style.opacity = curOpac/10; } else { document.getElementById("img").style.filter = 'alpha(opacity=' + curOpac*10 + ')'; document.getElementById("img").style.MozOpacity = curOpac/10; } } function swapImage(){ curPic = (++curPic > images.length-1) ? 0 : curPic; document.getElementById("img").src = images[curPic]; } }window.onload = function(){ autoImage(); } The above works. var slideshow = { images : ["http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png","http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png","http://www.techlifeweb.com/facebook_logo.jpg","http://scm-l3.technorati.com/10/05/10/12671/twitter-logo-5.jpg","http://www.thetechherald.com/media/images/201115/Adobe_2.jpg","http://www.easyquestion.net/learninginadigitalworld/wp-content/uploads/2009/06/ms-office-logo.jpg"], curOpac: 10, opacStep: 0.5, dirn: -1, setOpacity: function(){ this.curOpac += this.opacStep * this.dirn; if (this.curOpac < 0) { this.swap; this.curOpac = 0; this.dirn = 1; slideshow; return; } if (this.curOpac > 10) { this.curOpac = 10; this.dirn = -1; return; } if (document.getElementById("img").style.opacity=="string"){ document.getElementById("img").style.opacity = this.curOpac/10; } else { document.getElementById("img").style.filter = 'alpha(opacity=' + this.curOpac*10 + ')'; document.getElementById("img").style.MozOpacity = this.curOpac/10; } }, curPic: 0, swap: function(){ this.curPic = (++this.curPic > this.images.length) ? 0 : this.curPic ; document.getElementById("img").src = this.images[this.curPic]; }, };window.onload = function(){ fadeTimer = setInterval(function(){slideshow.setOpacity()},5000); } And I want to use JSON to re-make the slideshow. But it does not work.FF Console reports:
×
×
  • Create New...