مشخصات مقاله
آموزش ساخت گالری اسلاید شو برای سایت
آموزش ساخت گالری اسلايدشو
در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html و جاوا اسكريپت Slideshow Gallery ایجاد کنیم.
قدم اول : کد HTML را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!-- Container for the image gallery --> < div class = "container" > <!-- Full-width images with number text --> < div class = "mySlides" > < div class = "numbertext" >1 / 6</ div > < img style = "width:100%" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_woods_wide.jpg" > </ div > < div class = "mySlides" > < div class = "numbertext" >2 / 6</ div > < img style = "width:100%" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_5terre_wide.jpg" > </ div > < div class = "mySlides" > < div class = "numbertext" >3 / 6</ div > < img style = "width:100%" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg" > </ div > < div class = "mySlides" > < div class = "numbertext" >4 / 6</ div > < img style = "width:100%" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_lights_wide.jpg" > </ div > < div class = "mySlides" > < div class = "numbertext" >5 / 6</ div > < img style = "width:100%" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" > </ div > < div class = "mySlides" > < div class = "numbertext" >6 / 6</ div > < img style = "width:100%" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide.jpg" > </ div > <!-- Next and previous buttons --> < a class = "prev" onclick = "plusSlides(-1)" >❮</ a > < a class = "next" onclick = "plusSlides(1)" >❯</ a > <!-- Image text --> < div class = "caption-container" > < p id = "caption" > </ p ></ div > <!-- Thumbnail images --> < div class = "row" > < div class = "column" > < img class = "demo cursor" style = "width:100%" onclick = "currentSlide(1)" alt = "The Woods" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_woods_wide.jpg" > </ div > < div class = "column" > < img class = "demo cursor" style = "width:100%" onclick = "currentSlide(2)" alt = "Cinque Terre" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_5terre_wide.jpg" > </ div > < div class = "column" > < img class = "demo cursor" style = "width:100%" onclick = "currentSlide(3)" alt = "Mountains and fjords" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg" > </ div > < div class = "column" > < img class = "demo cursor" style = "width:100%" onclick = "currentSlide(4)" alt = "Northern Lights" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_lights_wide.jpg" > </ div > < div class = "column" > < img class = "demo cursor" style = "width:100%" onclick = "currentSlide(5)" alt = "Nature and sunrise" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" > </ div > < div class = "column" > < img class = "demo cursor" style = "width:100%" onclick = "currentSlide(6)" alt = "Snowy Mountains" data-src = "http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide.jpg" > </ div > </ div > </ div > < button ></ button > |
قدم دوم : کد CSS را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | * { box-sizing: border-box; } /* Position the image container (needed to position the left and right arrows) */ .container { position : relative ; } /* Hide the images by default */ .mySlides { display : none ; } /* Add a pointer when hovering over the thumbnail images */ .cursor { cursor : pointer ; } /* Next & previous buttons */ .prev, .next { cursor : pointer ; position : absolute ; top : 40% ; width : auto ; padding : 16px ; margin-top : -50px ; color : white ; font-weight : bold ; font-size : 20px ; border-radius: 0 3px 3px 0 ; user-select: none ; -webkit-user-select: none ; } /* Position the "next button" to the right */ .next { right : 0 ; border-radius: 3px 0 0 3px ; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color : rgba( 0 , 0 , 0 , 0.8 ); } /* Number text (1/3 etc) */ .numbertext { color : #f2f2f2 ; font-size : 12px ; padding : 8px 12px ; position : absolute ; top : 0 ; } /* Container for image text */ .caption-container { text-align : center ; background-color : #222 ; padding : 2px 16px ; color : white ; } .row:after { content : "" ; display : table; clear : both ; } /* Six columns side by side */ .column { float : left ; width : 16.66% ; } /* Add a transparency effect for thumnbail images */ .demo { opacity: 0.6 ; } .active, .demo:hover { opacity: 1 ; } <button></button> |
قدم سوم : کد جاوا اسکریپت را اضافه کنید.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName( "mySlides" ); var dots = document.getElementsByClassName( "demo" ); var captionText = document.getElementById( "caption" ); 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" ; captionText.innerHTML = dots[slideIndex-1].alt; } <button></button> |
نمونه مثال گالری اسلاید شو
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <p><br> <h2 style= "text-align:center" >Slideshow Gallery</h2></p> <p><div class = "container" ><br> <div class = "mySlides" ><br> <div class = "numbertext" >1 / 6</div><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=img_woods_wide.jpg" style= "width:100%" ><br> </div></p> <p> <div class = "mySlides" ><br> <div class = "numbertext" >2 / 6</div><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=img_5terre_wide.jpg" style= "width:100%" ><br> </div></p> <p> <div class = "mySlides" ><br> <div class = "numbertext" >3 / 6</div><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg" style= "width:100%" ><br> </div><br> <br> <div class = "mySlides" ><br> <div class = "numbertext" >4 / 6</div><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=img_lights_wide.jpg" style= "width:100%" ><br> </div></p> <p> <div class = "mySlides" ><br> <div class = "numbertext" >5 / 6</div><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" style= "width:100%" ><br> </div><br> <br> <div class = "mySlides" ><br> <div class = "numbertext" >6 / 6</div><br> <img src= "http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide.jpg" style= "width:100%" ><br> </div><br> <br> <a class = "prev" onclick= "plusSlides(-1)" >❮</a><br> <a class = "next" onclick= "plusSlides(1)" >❯</a></p> <p> <div class = "caption-container" ><br> <p id= "caption" ></p><br> </div></p> <p> <div class = "row" ><br> <div class = "column" ><br> <img class = "demo cursor" src= "http://articles.tahlildadeh.com/image.axd?picture=img_woods_wide.jpg" style= "width:100%" onclick= "currentSlide(1)" alt= "The Woods" ><br> </div><br> <div class = "column" ><br> <img class = "demo cursor" src= "http://articles.tahlildadeh.com/image.axd?picture=img_5terre_wide.jpg" style= "width:100%" onclick= "currentSlide(2)" alt= "Cinque Terre" ><br> </div><br> <div class = "column" ><br> <img class = "demo cursor" src= "http://articles.tahlildadeh.com/image.axd?picture=img_mountains_wide.jpg" style= "width:100%" onclick= "currentSlide(3)" alt= "Mountains and fjords" ><br> </div><br> <div class = "column" ><br> <img class = "demo cursor" src= "http://articles.tahlildadeh.com/image.axd?picture=img_lights_wide.jpg" style= "width:100%" onclick= "currentSlide(4)" alt= "Northern Lights" ><br> </div><br> <div class = "column" ><br> <img class = "demo cursor" src= "http://articles.tahlildadeh.com/image.axd?picture=img_nature_wide.jpg" style= "width:100%" onclick= "currentSlide(5)" alt= "Nature and sunrise" ><br> </div> <br> <div class = "column" ><br> <img class = "demo cursor" src= "http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide.jpg" style= "width:100%" onclick= "currentSlide(6)" alt= "Snowy Mountains" ><br> </div><br> </div><br> </div></p> <p><script><br> var slideIndex = 1;<br> showSlides(slideIndex);</p> <p>function plusSlides(n) {<br> showSlides(slideIndex += n);<br> }</p> <p>function currentSlide(n) {<br> showSlides(slideIndex = n);<br> }</p> <p>function showSlides(n) {<br> var i;<br> var slides = document.getElementsByClassName( "mySlides" );<br> var dots = document.getElementsByClassName( "demo" );<br> var captionText = document.getElementById( "caption" );<br> if (n > slides.length) {slideIndex = 1}<br> if (n < 1) {slideIndex = slides.length}<br> for (i = 0; i < slides.length; i++) {<br> slides[i].style.display = "none" ;<br> }<br> for (i = 0; i < dots.length; i++) {<br> dots[i].className = dots[i].className.replace( " active" , "" );<br> }<br> slides[slideIndex-1].style.display = "block" ;<br> dots[slideIndex-1].className += " active" ;<br> captionText.innerHTML = dots[slideIndex-1].alt;<br> }<br> </script><br> </p> <button></button> |
خروجی Slideshow Gallery

1400/01/06
4157
592
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com