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


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


  • Community Calendar




Website URL








Found 27 results

  1. 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";}
  2. 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>') };
  3. 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!
  4. 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
  5. 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.
  6. 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>
  7. 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>
  8. 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.
  9. 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"; }
  10. 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
  11. 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
  12. 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?
  13. 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
  14. 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.
  15. 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/
  16. 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
  17. 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);}
  18. 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>
  19. 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!
  20. 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
  21. 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
  22. javascript slideshow problems

    Hi, i am new to javascript and would like some code to turn my pictures into a slideshow.Anyone with some help please?
  23. 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)}
  24. Making a slideshow full-screen

    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.
  25. Slideshow - hyperlinking images

    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.