Jump to content

Search the Community

Showing results for tags 'slideshow'.



More search options

  • 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

Found 31 results

  1. I found code for a scrolling looping slideshow that I like but I can't get the div's to center. The div's seem to be left aligned with more space on the right side of the screen than left; this is evident on my 1366px monitor but much more obvious on a 1920px monitor where there is a lot of blank space on the right side of the screen. I have assigned display:flex to the parent and nested containers and center to align-items and justify-content, but the 2 main div's ("slider" and "wrapper_slider_text") are not centering. If anyone can help, I'd be very grateful. Thanks. <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { width: 100%; margin: 0 auto 0; } .flex-container-slider { display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: 0px; justify-content: center; align-items: center; } .slider { width: 768px; height: 432x; overflow: hidden; } #slider_images { width : 9984px; height: 432px; overflow: hidden; /* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */ animation: slide 36s infinite; -moz-animation: slide 36s infinite; -webkit-animation: slide 36s infinite; -o-animation: slide 36s infinite; } #slider_images img { float: left; } .container_blank_space_small p { text-indent: -9999px; height: 26px; } @keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-moz-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-webkit-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } @-o-keyframes slide{ 0%{margin-left: 0px;} 4.7%{margin-left: 0px;} 7.7%{margin-left: -768px;} 12.4%{margin-left: -768px;} 15.4%{margin-left: -1536px;} 20.1%{margin-left: -1536px;} 23.1%{margin-left: -2304px;} 27.8%{margin-left: -2304px;} 30.8%{margin-left: -3072px;} 35.5%{margin-left: -3072px;} 38.5%{margin-left: -3840px;} 43.2%{margin-left: -3840px;} 46.2%{margin-left: -4608px;} 50.9%{margin-left: -4608px;} 53.9%{margin-left: -5376px;} 58.6%{margin-left: -5376px;} 61.6%{margin-left: -6144px;} 66.3%{margin-left: -6144px;} 69.3%{margin-left: -6912px;} 74%{margin-left: -6912px;} 77%{margin-left: -7680px;} 81.7%{margin-left: -7680px;} 84.7%{margin-left: -8448px;} 89.4%{margin-left: -8448px;} 92.4%{margin-left: -9216px;} 97.1%{margin-left: -9216px;} 100%{margin-left: 0px;} } .wrapper_slider_text { display: flex; width: 35%; overflow: hidden; min-height: 100%; justify-content: center; align-items: center; } .slider_text { font-family: "europa",sans-serif; font-size: 125%; color: black; font-weight: 500; line-height: 125%; padding: 75px; letter-spacing: .8px; font-weight: 600; } </style> </head> <body> <header> </header> <section class="flex-container-slider"> <div class="slider"> <!-- Each image is 768px by 432px --> <div id="slider_images"> <img src="http://bartonlewisfilm.com/img_768_water.jpg" alt="water" /> <img src="http://bartonlewisfilm.com/img_768_blue.jpg" alt="blue" /> <img src="http://bartonlewisfilm.com/img_768_robins_egg.jpg" alt="robins egg" /> <img src="http://bartonlewisfilm.com/img_768_23rd_st.jpg" alt="23rd st" /> <img src="http://bartonlewisfilm.com/img_768_broken_guru.jpg" alt="broken guru" /> <img src="http://bartonlewisfilm.com/img_768_i_will_miss_you.jpg" alt="i will miss you" /> <img src="http://bartonlewisfilm.com/img_768_pants.jpg" alt="pants" /> <img src="http://bartonlewisfilm.com/img_768_nose.jpg" alt="nose" /> <img src="http://bartonlewisfilm.com/img_768_swirls.jpg" alt="swirls" /> <img src="http://bartonlewisfilm.com/img_768_church_ave.jpg" alt="church ave" /> <img src="http://bartonlewisfilm.com/img_768_network_reality_stars.jpg" alt="network reality all stars" /> <img src="http://bartonlewisfilm.com/img_768_ports.jpg" alt="ports" /> <img src="http://bartonlewisfilm.com/img_768_kline.jpg" alt="kline" /> </div> </div> <div class="wrapper_slider_text"> <div class="slider_text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus diam odio, non dignissim lectus auctor vitae. Sed facilisis malesuada velit nec vehicula. Vivamus eleifend scelerisque faucibus. </p> <div class="container_blank_space_small"> <p>text</p> </div> <p>Mauris porttitor faucibus lorem, ut tincidunt justo dignissim eget. Nulla congue orci sit amet sem commodo, et volutpat lorem cursus. </p> </div> </div> </section> </body> </html>
  2. bartonlewis

    viewport is larger than body

    For some reason I cannot determine, there is a scroll bar at the bottom of my page which accesses a blank portion of the viewport on the right. I have a feeling there is something in the stylesheet of the code I am accessing for the slideshow that is responsible, but I don't know how to correct it. I have removed all extraneous code except for the slideshow. Can anybody help? Thank you. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton's wall cuts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> * {box-sizing: border-box;} body { width: auto; margin: 0 auto 0; } .flex-container { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 50px 50px 50px; padding-bottom: 30px; align-items: center; justify-content: center; font-family: "europa",sans-serif; font-size: 105%; } .nav { margin: 0 30px; } a { text-decoration: none; color: black; } div.nav a { font-size: 1.8em; } .main { width: auto; display: flex; justify-content: space-between; align-items: center; margin-top: 100px; } .browse { width: 20%; margin: 0 5%; } p.indent1 { text-indent: 1em; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.4em; color: black; display: block; margin: 0; } /* CSS FOR SLIDESHOW */ .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { display: flex; justify-content: center; width: ; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 15px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} } /* END OF CSS FOR SLIDESHOW */ .indent { text-indent: -9999px; } .about { width: 66%; margin: 0 auto; margin-top: 5%; } .about p { padding: 15px; line-height: 1.3em; font-family: "europa",sans-serif; font-size: 1.75em; color: black; } .underline { text-decoration: underline; font-variant: small-caps; font-size: 1.1em; } a:hover { text-decoration: underline; } footer { background: #827e90; height: 75px; margin-top: 5%; } footer p { padding: 25px; font-family: "europa",sans-serif; font-size: 1.1em; letter-spacing: .8px; color: white; } .flex-container-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; padding-top: 0px; justify-content: space-between; align-items: center; } .flex-container-footer>div { margin: 0px 50px; } .social a { color: white; } .fa { padding: 10px; font-size: ; width: ; text-align: center; text-decoration: none; border-radius: 50%; } .copyright p { font-family: "europa",sans-serif; color: black; font-size: 1.1em; letter-spacing: .8px; line-height: 135%; font-weight: 500; } </style> </head> <body> <div class="parallax"> <div> <h1>text</h1> </div> </div> <section class="main"> <div class="browse"> <h3>text</h3> <h4>text</h4> <p>text</p> <p>text</p> <p>text</p> </div> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="http://bartonlewisfilm.com/img_287-163.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="http://bartonlewisfilm.com/img_162-373.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="http://bartonlewisfilm.com/img_coors_light.jpg" style="max-width: 100%" alt="157-245, 96th St., IND Eighth Ave. Line" style="width:80%"> <div class="text"></div> </div> </div> <div class="browse"> <p class="indent">Oversize</p> </div> </section> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <div class="about"> <p>text text text</p> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 3000); // Change image every 3 seconds } </script> <footer> <div class="flex-container-footer"> <div> <p>copyright © 2018 by Barton Lewis</p> </div> <div class="social"> <a href="https://www.facebook.com/profile.php?id=1410465690" class="fa fa-facebook"></a> <a href="https://www.instagram.com/bartonlewis2328/" class="fa fa-instagram"></a> </div> </div> </footer> <script> </script> </body> </html>
  3. Glen09

    Slideshow - No initial image

    I used the code from this location.... https://www.w3schools.com/howto/howto_js_slideshow.asp And got it to work ok, for my purposes (with just a few changes) except the initial image doesn't show up. Clicking a dot will make it start, but how do I get it to show the first image automatically. See: https://www.audioanalogy.ca/studiotour.htm to see only the dots, but no start image. I hope someone can help narrow down the glitch. Thanks
  4. RickVanLouis

    Multiple Slideshows (more than 2)

    Hi there, Sorry but my JS-Knowledge is very bad. I tried to implement multiple slideshows wthin one website. I used this tutorial. But I'm not able to create more than two slideshows without bugs. I tried to adjust the JS code but wasn't successful. At least I have to implement 4 slideshows. My Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides1, .mySlides2 {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */ .prev:hover, .next:hover { background-color: #f1f1f1; color: black; } </style> </head> <body> <h2 style="text-align:center">Multiple Slideshows</h2> <div class="slideshow-container"> <div class="mySlides1"> <img src="images/gallery/fulls/06.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="images/gallery/fulls/05.jpg" style="width:100%"> </div> <div class="mySlides1"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <div class="slideshow-container"> <div class="mySlides2"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/02.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/01.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <div class="slideshow-container"> <div class="mySlides3"> <img src="images/gallery/fulls/07.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/03.jpg" style="width:100%"> </div> <div class="mySlides2"> <img src="images/gallery/fulls/05.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div> <script> var slideIndex = [1,1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showSlides(1, 0); showSlides(1, 1); showSlides(1, 2); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } </script> </body> </html> Standard code from https://www.w3schools.com/howto/howto_js_slideshow.asp (only JS): var slideIndex = [1,1]; /* Class the members of each slideshow group with different CSS classes */ var slideId = ["mySlides1", "mySlides2"] showSlides(1, 0); showSlides(1, 1); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } Thank you for any help
  5. Hello, I've been adapting the code from the Slideshow how-to (https://www.w3schools.com/howto/howto_js_slideshow.asp) for my site. However, I would like for the previous arrow to be hidden in the first image and for the next arrow to be hidden in the last image. In other words, no looping. This is for the manual slideshow. I'm not a coding expert, I adapt already existing code, so I'm not sure where to begin. Thank you! The JavaScript from the how-to page is: var slideIndex = 1;showSlides(slideIndex);function plusSlides(n) { showSlides(slideIndex += n);}function currentSlide(n) { showSlides(slideIndex = n);}function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";}
  6. josito

    URL slideshow

    On my main page I have a slideshow with the featured posts however, when I try to enter one of them I go to /undefined instead of the link I'm suppose to. Any idea why? // Featured posts cat1 = 'zblog'; imgr = new Array(); imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif"; showRandomImg = true; aBold = true; numposts1 = 12; function recentposts1(json) { j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0; img = new Array; if (numposts1 <= json.feed.entry.length) maxpost = numposts1; else maxpost = json.feed.entry.length; document.write('<div class="blog_featured_posts owl_carouselle" style="display:none;">'); for (var i = 0; i < maxpost; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var tag = entry.category[0].term; var posturl; if ("content" in entry) var postcontent = entry.content.$t; else if ("summary" in entry) var postcontent = entry.summary.$t; else var postcontent = ""; if (j > imgr.length - 1) j = 0; img[i] = imgr[j]; s = postcontent; a = s.indexOf("<img"); b = s.indexOf('src="', a); c = s.indexOf('"', b + 5); d = s.substr(b + 5, c - b - 5); if (a != -1 && (b != -1 && (c != -1 && d != ""))) img[i] = d; var trtd = '<div class="blog_featured_post"><a href="' + posturl + '"><div class="blog_contents"><h3>' + posttitle + '</h3> <div class="clr"></div><span>' + tag + '</span></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>'; document.write(trtd) j++ } document.write('</div>') };
  7. monkeyj

    Image slideshow

    Hello, I'm hoping this is the right section to post. I would like to slightly advance the slideshow in the example at: w3schools.com/howto/howto_js_slideshow.asp However having basic knowledge of CSS and 0 of JS I don't even know where to start. I'd like to add two things: 1) change bullets into small thumbnails of the respective images, with dim/highlight behaviour remaining intact (i.e. the inactive thumbnails being slightly whited-out, and active/hover ones bright) 2) make the strip of thumbnails rotatable automatically when reaching the last image on display, also by pressing small arrows at each end, when using mousewheel/touchpad scroll and drag, and touch on mobile devices Many thanks for suggestions, hope I haven't asked too much!
  8. Max Castril

    Slideshows in CSS3

    Hello CSS community! I have a general question about slideshows with CSS3 and Javascript. The 'TryItEditor' examples all call http://www.w3schools.com/lib/w3.css which, when you look at it is a huge block of unintelligible (to me anyway) script. e.g.: ---------------------------------------------------------------------------------------------------------------------- "a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} dfn{font-style:italic}mark{background:#ff0;color:#000} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px} img{border-style:none}svg:not(:root){overflow:hidden} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} hr{box-sizing:content-box;height:0;overflow:visible} button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold} button,input{overflow:visible}button,select{text-transform:none} button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button} button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0} button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} [type=checkbox],[type=radio]{padding:0} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-input-placeholder{color:inherit;opacity:0.54} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}" -------------------------------------------------------------------------------------------------------------------------- (this is a small portion). I use html instead of a website editor such as Joomla or Dreamweaver as I am a minimalist and don't like putting huge amounts of code onto the server (giving away my age here). Is there some way that I can produce slideshows myself without recourse to something like this stylesheet. Looking through it, it seems to have catered for every concievable slideshow arrangement that will ever be required. I'd prefer to simplify things if I can. Thanks Max
  9. I see you have examples of a non-autoplay slideshow with dots and arrows, and you have an auto-play slideshow that does not have arrows and you cannot select the dots to go to that particular state. Both are great, and I would like to know the code to make an autoplay slideshow, that has selectable dots, and next/prev arrows.
  10. Hi, I want to change the background image automatically every 5 second and the indicators should be green. I followed w3schools slideshow tutorial and created this slideshow. But it doesn't seem to work as expectation. Please tell me where I made the mistake. thank you in advance. <!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } .header-slideshow-container { width: 100%; margin: 0; padding: 0; } .header-slide { display: block; width: 100%; height: 100%; margin: 0; padding: 0; } #header-slide1 { background-image: url("http://www.w3schools.com/howto/img_nature_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } #header-slide2 { background-image: url("http://www.w3schools.com/howto/img_fjords_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } #header-slide3 { background-image: url("http://www.w3schools.com/howto/img_mountains_wide.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } .current-header-slides-container { position: absolute; top: 45%; right: 25px; margin-top: -30px; } .current-header-slide-indicator { width: 15px; height: 15px; border-radius: 50%; margin-bottom: 5px; background-color: black; } </style> </head> <body> <div class= "header-slideshow-container"> <div class= "header-slide" id= "header-slide1"></div> <div class= "header-slide" id= "header-slide2"></div> <div class= "header-slide" id= "header-slide3"></div> <div class= "current-header-slides-container"> <div class= "current-header-slide-indicator"></div> <div class= "current-header-slide-indicator"></div> <div class= "current-header-slide-indicator"></div> </div> </div> <script> var h = window.innerHeight; (function () { 'use strict'; document.getElementsByClassName("header-slideshow-container")[0].style.height = h + 'px'; }()); var headerSlideIndex = 0; headerSlideshow(); function headerSlideshow() { 'use strict'; var i, headerSlides = document.getElementsByClassName("header-slide"), dots = document.getElementsByClassName("current-header-slide-indicator"); for (i = 0; i < headerSlides.length; i++) { headerSlides[i].style.display = "none"; } headerSlideIndex++; if (headerSlideIndex >= headerSlides.length) { headerSlideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].style.backgroundColor = "black"; } headerSlides[i-1].style.display = "block"; dots[i-1].style.backgroundColor = "green"; setTimeout(headerSlideshow, 5000); } </script> </body> </html>
  11. Hi, I want to create a slideshow that will work automatically and also user can change slides manually. The manual slideshow is running but the automatic slideshow function is not running. Also the active-slides class doesn't get activated. Can you please help me on fixing the issue? Here is the code <!DOCTYPE html> <html> <head> <style> .project-images { max-width: 30%; height: 200px; position: absolute; left: 20px; } .mySlides { width: 100%; height: 200px; -webkit-animation-name: fade; -webkit-animation-duration: 1s; animation-name: fade; animation-duration: 1s; } .project-images-slideshow { width: 100%; height: 100%; margin: 0; padding: 0; left: 10px; position: relative; } .previous, .next { position: absolute; top: 48%; margin-top: -10px; color: white; font-size: 20px; padding:10px; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .previous { left: 0; border-radius: 0px 4px 4px 0px; } .next { right: 0; border-radius: 4px 0px 0px 4px; } .previous:hover,.next:hover { background-color: rgba(0,0,0); background-color: rgba(0,0,0,0.6); cursor: pointer; } .dots-container { text-align: center; margin: 10px 5px; } .dots-container .dot { display: inline-block; width: 80px; height: 50px; opacity: 0.4; transition: 0.5s; cursor: pointer; } .active-slides { opacity: 1; } /**Fading animation to the mySlides class**/ @-webkit-keyframes fade { from {opacity: 0} to {opacity: 1} } @keyframes fade { from {opacity: 0} to {opacity: 1} } </style> </head> <body> <div class= "project-images"> <div class= "project-images-slideshow"> <img src= "http://www.w3schools.com/howto/img_nature_wide.jpg" class= "mySlides"/> <img src= "http://www.w3schools.com/howto/img_fjords_wide.jpg" class= "mySlides"/> <img src= "http://www.w3schools.com/howto/img_mountains_wide.jpg" class= "mySlides"/> <span class= "previous" onclick= "plusSlide(-1)">❰</span> <span class= "next" onclick= "plusSlide(+1)">❱</span> </div> <div class= "dots-container"> <img src= "http://www.w3schools.com/howto/img_nature_wide.jpg" class= "dot" onclick= "currentSlide(1)"/> <img src= "http://www.w3schools.com/howto/img_fjords_wide.jpg" class= "dot" onclick= "currentSlide(2)"/> <img src= "http://www.w3schools.com/howto/img_mountains_wide.jpg" class= "dot" onclick= "currentSlide(3)"/> </div> </div> <script> var slideIndex = 1, t, dots; function slideshow(n) { 'use strict'; var i, mySlides = document.getElementsByClassName("mySlides"), dots = document.getElementsByClassName("dot"); if (n > mySlides.length) { slideIndex = 1; } if (n < 1) { slideIndex = mySlides.length; } for (i = 0; i < mySlides.length; i++) { mySlides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active-slides", ""); } mySlides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active-slides"; } function autoSlideshow() { 'use strict'; var slideIndex = 0, i, mySlides = document.getElementsByClassName("mySlides"); for (i = 0; i > mySlides.length; i++) { mySlides[i].style.display = "none"; dots[i].className = dots[i].className.replace(" active-slides", ""); } slideIndex++; if (slideIndex > mySlides.length) { slideIndex = 1; } mySlides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active-slides"; t = setTimeout(autoSlideshow, 5000); } function plusSlide(n) { 'use strict'; slideshow(slideIndex += n); } function currentSlide(n) { 'use strict'; slideshow(slideIndex = n); } slideshow(slideIndex); autoSlideshow(); </script> </body> </html>
  12. Hi, this is a automatic slideshow script. var slideIndex = 0; function showSlides(n) { 'use strict'; var i, slides = document.getElementsByClassName("slideshow"), dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } slideIndex++; if(slideIndex > slides.length) {slideIndex = 1; } if(slideIndex < 0) { slideIndex = slides.length} for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; var timeHandler = setTimeout(showSlides,5000); } showSlides(slideIndex); function plusSlides(n) { 'use strict'; showSlides(slideIndex += n-1); } function currentSlide(n) { 'use strict'; showSlides(slideIndex = n-1); } Now I want to reset the time when the dots variable is clicked. And set the timeout 5s again. I tried to clear the timeout and invoke the setTimeout var again. But it didn't help. Can you guys please help me to reset the time? Thank you in advance.
  13. Hi, I am facing problem to undestand the showSlides() function . Can you please explain this function to me . var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }
  14. tucsondonpepe

    Faded Animation

    Hi, Since this is my first post, I hope I am posting in the correct area. If not, please me me know. I am developing a one-page mock-up website for a 55+ community that I live in in Mount Juliet, Tennessee as a volunteer, The URL is http://www.joelestingi.com/dwlp/. I used the code from the Faded Animation information, http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading, to develop the slider. Since the slider is working correctly, it appears I made the correct modifications. However, there are two issues I need help with. The first is the padding above and below the slider image. I attempted to search the CSS file and found a lot of padding commands, but did not know which one to select. The second issue is that after an image fades, it abruptly disappears. The next image then fades in. When I run the code in http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading, the fade in and fade out work correctly. Would appreciate your help with this. Thank you. Joe
  15. I was reading the tutorial here http://www.w3schools.com/howto/howto_js_slideshow.asp and I understand how the examples work. What I was wondering is how would you combine these examples to build a slideshow that is automatic AND the user can navigate? Anyone know how to do that? Cheers
  16. I'm using the W3Schools Slideshow example here: http://www.w3schools.com/howto/howto_js_slideshow.asp I have links on a different page, and I'd like each of those links to open the slideshow page on a specific slide. Is there a simple way to do this without rewriting much of the existing HTML/JavaScript/CSS?
  17. Cosina

    Problem with slideshow

    Hello. I followed your instructions (http://www.w3schools.com/w3css/w3css_slideshow.asp) and I built a slideshow, adding several features. It's all right, but the arrows do not work. Can you tell me what I did wrong and correct the code that attach? Thank you very much for helping. xforum.html
  18. tanmoy911

    Responsive slideshow using only w3.css

    Dear Members, I am trying to develop a Responsive Slideshow using w3.css only. Don't want to use any other plugin. I want to achieve (http://www.free-css.com/free-css-templates/page193/mpurpose ) This effect. Below is the code it works not smooth enough though in desktop environment but fails when resize the browser window. <div class="w3-container w3-padding-16" style="position:relative"> <div class="w3-row"> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg1.jpg" style="max-width:100%;" > <div class="w3-container w3-orange"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Garments </b></h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"><i>Fashions Aperals OutFits Weres </i> </h1> </div> <img src="Images/12246_ultramarine_blue_b.jpg" style="position:absolute;top:25%;right:10%;width:10%" alt="Portfolio 4"> </div> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg3.jpg" style="max-width:100%;"> <div class="w3-row w3-col m4 l4"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Color Schemes </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Comes with various color schemes </b> </h1> </div> <div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div> </div> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg4.jpg" style="max-width:100%;"> <div class="w3-row w3-col m4 l4"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Feature Rich </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Huge amount of variations! </b> </h1> </div> <div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div> </div> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 4000); } </script> </div> May kindly help.
  19. ann_ascherman

    modified slideshow no longer responsive

    Hi! I modified the wordpress slideshow to make it much nicer looking and added text below, however, I am having a horrible time with the responsive aspect of it...the location of the control buttons (to move the show forward and backwards), as well as the simple text block below the slides move an enormous amount depending on the screen size! Is there anything I can do to make the location of these elements dependent on each other so that they re-locate accordingly? Otherwise, no one is going to be able to view the slides! The page I am talking about can be found here: http://annascherman.com/made-in-birmingham/
  20. Hi, I am trying to make this webpage for posting and viewing news. It will be shown on a big screen in our Hub. I've been having a super hard time with putting a proper slideshow in the HubWeb_HubPage.php one. I've tried copying in code from two other pre-made slideshows, but best I've got was a misaligned slideshow that didn't fit the top right area properly. And I made an embedded YouTube video appear and reappear on top of it periodically. So I decided to learn and do a simple one myself. What could go wrong if I'm writing the thing inside my webpage myself, right? Nothing happens. See for yourself. It's driving me mad already. My goal for the top right slideshow area is to have at least 5 images or videos sliding and autoplaying with the top right area filled as much as possible, though keeping normal proportions (to not stretch the image). So the whole webpage with news must be responsive and fill the screen it's on. The slideshow area is 70%/70% of the screen width (the webpage will be put on fullscreen on the display in Hub). But I can't even get the images sliding! Please download the zipped folder from this link and check out the code and the page: http://s000.tinyupload.com/index.php?file_id=60798650373352387766 I've also attached just the HubPage that has the slideshow code on it. This one is how far I could get it modifying the CSS values. Thank you for your help! <!DOCTYPE html><?phpif (!empty($_POST)) {file_put_contents('NewsLines.txt', $_POST['newsline'] . "____" . date("d.m") . "____" . "^^^^" . PHP_EOL, FILE_APPEND);}?><html> <head> <!-- load jQuery --> <script src="jquery-1.11.3.min.js"></script> <link rel="stylesheet" type="text/css" href="HubWeb_CSS.css"> </script> <script type="text/javascript"> window.onload = function() { fullClock(); newscaster(); updater(); } $(document).ready(function() { var currentPosition = 0; var slideWidth = 500; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 3000; slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); $('#slidesHolder').css('width', slideWidth * numberOfSlides); function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; } else { currentPosition++; } moveSlide(); } function moveSlide() { $('#slidesHolder') .animate({'marginLeft' : slideWidth*(-currentPosition)}); } }); function fullClock() { var today=new Date(); var mon=today.getMonth(); var d=today.getDate(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); var timeOfDay=(h<12)?"AM":"PM"; var period = ""; if (h == 8 && m >= 55 && m <= 59) { period = "Registration"; } else if (h == 9) { period = "Period 1"; } else if (h == 10) { period = "Period 2"; } else if (h == 11 && m < 15) { period = "Break"; } else if ((h == 11 && m >= 15) || (h == 12 && m < 15)) { period = "Period 3"; } else if ((h == 12 && m >= 15) || (h == 13 && m < 15)) { period = "Period 4"; } else if (h == 13 && m >= 15 && m < 50) { period = "Lunch"; } else if ((h == 13 && m >= 50) || (h == 14 && m < 50)) { period = "Period 5"; } else if ((h == 14 && m >= 50) || (h == 15 && m <= 35)) { period = "Period 6"; } else { period = ""; } mon = mon + 1; mon = checkTime(mon); d = checkTime(d); m = checkTime(m); s = checkTime(s); document.getElementById('date').innerHTML = d+"."+mon; document.getElementById('clock').innerHTML = h+":"+m+":"+s; document.getElementById('AMPM').innerHTML = timeOfDay; document.getElementById('period').innerHTML = period; var t = setTimeout(function(){fullClock()},500); } function checkTime(i) { if (i<10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } // VIDEO-------------------------------------------------------------------------------------------------------------------- function updater() { setInterval(function() { newscaster() }, 1000); } function newscaster() { $.ajax({ url: 'NewsLines.txt', type:'POST', success: function(m){ allLines = m; allLines = allLines.split("r"); // Splice loop reverse because splice messes up the index of the original array the loop is looking up for (var i = allLines.length-1; i >= 0; i--) { checkLine = allLines[i].split("____"); if (checkLine[0].length <= 1) { allLines.splice(i, 1); } } textline = allLines[allLines.length - 1].split("____"); document.getElementById('news1').innerHTML = textline[0]; document.getElementById('date1').innerHTML = textline[1]; textline = allLines[allLines.length - 2].split("____"); document.getElementById('news2').innerHTML = textline[0]; document.getElementById('date2').innerHTML = textline[1]; textline = allLines[allLines.length - 3].split("____"); document.getElementById('news3').innerHTML = textline[0]; document.getElementById('date3').innerHTML = textline[1]; } }); } // clicking on a line or image in the Hub Page deletes that IMG in the directory or text line from the News Lines file function deleteLine(Nr) { var answer = confirm("Delete News Line " + Nr + "?"); if (answer) { search = document.getElementById('news' + Nr).innerHTML + "____" + document.getElementById('date' + Nr).innerHTML; $.post('HubWeb_Deleter.php', {search}); } } </script> </head> <body> <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"> <img src="Slideshow/banner01.jpg" /> </div><!--/slide--> <div class="slide"> <img src="Slideshow/banner02.jpg" /> </div><!--/slide--> <div class="slide"> <img src="Slideshow/banner03.jpg" /> </div><!--/slide--> </div><!--/slideshowWindow--> </div><!--/slideshow--> <div id="side"> <div id="sideclock1" onclick="window.location='HubWeb_StaffPage.php';"> <p id="date"></p> <p id="clock"></p> </div> <div id="sideclock2" onclick="window.location='HubWeb_StaffPage.php';"> <p id="AMPM"></p> <p id="period"></p> </div> </div> <!-- add current time and period number on side section, say if Student WiFi is ON? --> <div = id="bottom"> <div id="line1" onclick="deleteLine('1')"> <img src="Contents/GreenStar.svg" id="star1"> <marquee id="news1" scrollamount=5>News line 1</marquee> <p id="date1">01.01</p> </div> <div id="line2" onclick="deleteLine('2')"> <img src="Contents/GreenStar.svg" id="star2"> <marquee id="news2" scrollamount=5>News line 2</marquee> <p id="date2">02.02</p> </div> <div id="line3" onclick="deleteLine('3')"> <img src="Contents/GreenStar.svg" id="star3"> <marquee id="news3" scrollamount=5>News line 3</marquee> <p id="date3">03.03</p> </div> </div> </body></html> HubWeb_HubPage.php HubWeb_CSS.css
  21. sampharo

    Putting a timer on slides

    Hi everyone, Thank you for letting me be here. This is my first posting. I am looking for some help with this slider I have on a website. It is working ok so far, except I can't seem to figure out a way to put a timer on the slides so that they would switch every few seconds. How do you guys think I should do this? Here is the code HTML: <div class="slider"><ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <a href="/HR-Diploma-exda.php"><img src="/images/Slider-HRM.jpg" alt="Certified Human Resources Professional Executive Diploma"/></a></div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <img src="/images/Slider-ILC.jpg" /> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li></ul></div> CSS: .slider{ margin-top:15px; margin-bottom:15px; margin-left:auto; margin-right:auto; padding-left:21px; width:880px; height:338px; overflow:hidden; border:0px solid; position:relative;}.slides { padding: 0; width: 880px; height: 338px; display: block; margin: 0 auto; position: relative;}.slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}.slides input { display: none; }.slide-container { display: block; }.slide { top: 0; opacity: 0; width: 880px; height: 338px; display: block; position: absolute; transform: scale(0); transition: all 0.2s ease-in-out;}.slide img { width: 100%; height: 100%;}.nav label { width: 100px; height: 30%; display: none; position: absolute; top: 118px; opacity: 0.2; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 100pt; text-align: center; line-height: 85px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label { opacity: 0.5; }.nav label:hover { opacity: 1; }.nav .next { right: 0; }input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label { display: block; }.nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center;}.nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8);}
  22. andy10676

    SEO a pure CSS Slideshow

    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>
  23. farhana

    CSS to center the slideshow

    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!
  24. JoelJonsson

    Full screen Slideshow

    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
  25. 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
×