Evolve Media Gallery
How do I make an evolve media gallery?
Http://codepen.io/alyda/pen/gvhEK?editors=100. What is a evolve media gallery? How do you make a evolve media gallery? This script and codes were developed by Alyssa on 08 September 2022, Thursday.
Evolve Media Gallery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Evolve Media Gallery</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://codepen.io/alyda/pen/Bzfbp.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2 hidden>Media</h2> <div class="swipe-container"> <div id="Main-carousel" class="swipe"> <div class="swipe-wrap"> <div class="slide" data-title data-url-title data-url data-youtube-id="m97O1dQAyhc" data-share data-tweet > <div class="wrapper-16-9"> <iframe id="player-m97O1dQAyhc" type="text/html" frameborder="0" allowfullscreen="1" width="100%" height="100%" src="https://www.youtube.com/embed/m97O1dQAyhc?showinfo=0&rel=0&enablejsapi=1&wmode=opaque"></iframe> </div> <h3 class="slide-title">Slide 1</h3> </div> <div class="slide" data-title data-url-title data-url data-phone data-tablet data-desktop data-tv data-share data-tweet > <div class="wrapper-16-9"> <img src="http://placekitten.com/g/1120/630" alt="" /> </div> <h3 class="slide-title">Slide 2</h3> </div> <div class="slide" data-title data-url-title data-url data-phone data-tablet data-desktop data-tv data-share data-tweet > <div class="wrapper-16-9"> <img src="http://placekitten.com/g/560/315" alt="" /> </div> <h3 class="slide-title">Slide 3</h3> </div> <div class="slide" data-title data-url-title data-url data-phone data-tablet data-desktop data-tv data-share data-tweet > <div class="wrapper-16-9"> <img src="http://placekitten.com/g/800/400" alt="" /> </div> <h3 class="slide-title">Slide 4</h3> </div> <div class="slide" data-title data-url-title data-url data-phone data-tablet data-desktop data-tv data-share data-tweet > <div class="wrapper-16-9"> <img src="http://placekitten.com/g/900/500" alt="" /> </div> <h3 class="slide-title">Slide 5</h3> </div> </div> <nav> <h1 hidden>carousel nav</h1> <span class="prev disabled">previous slide</span> <span class="next">next slide</span> </nav> <!-- <div class="overlay or modal"><span class="close-svg">close</span></div> --> <div class="tray"> <span class="share-svg">share</span> <span class="download-svg">download</span> </div> </div> </div> <div> <div id="Thumb-carousel" class="swipe"> <div class="swipe-wrap"> <div class="slide"> <a class="thumb current" href="" data-count="0"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 1</span> <time class="thumb-date "><i class="fa fa-clock-o"></i> date</time> </a> <a class="thumb" href="" data-count="1"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 2</span> <time class="thumb-date"><i class="fa fa-clock-o"></i> date</time> </a> <a class="thumb" href="" data-count="2"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 3</span> <time class="thumb-date"><i class="fa fa-clock-o"></i> date</time> </a> <a class="thumb" href="" data-count="3"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 4</span> <time class="thumb-date"><i class="fa fa-clock-o"></i> date</time> </a> </div> <div class="slide"> <a class="thumb" href="" data-count="4"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 5</span> <time class="thumb-date"><i class="fa fa-clock-o"></i> date</time> </a> <!--<a class="thumb" href="" data-count="5"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 6</span> <time class="thumb-date">date</time> </a>--> <!--<a class="thumb" href="" data-count="6"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 7</span> <time class="thumb-date">date</time> </a>--> <!--<a class="thumb" href="" data-count="7"> <img class="img-responsive" src="http://placekitten.com/g/350/196" alt="" /> <span class="thumb-title">Slide 8</span> <time class="thumb-date">date</time> </a>--> </div> </div> <nav> <h1 hidden>thumb nav</h1> <span class="prev disabled">previous slide</span> <span class="next">next slide</span> <ul class="dots"> <li class="current"><i class="fa fa-square"></i></li> <li><i class="fa fa-square"></i></li> </ul> </nav> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/thebird/Swipe/master/swipe.js'></script>
<script src='https://rawgit.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js'></script>
<script src='https://codepen.io/alyda/pen/tughI.js'></script> <script src="js/index.js"></script>
</body>
</html>
Evolve Media Gallery - Script Codes CSS Codes
/* this might be useful for the dots: https://codepen.io/joshnh/pen/cdECo*/
Evolve Media Gallery - Script Codes JS Codes
/* need to put code here, not use an external pen */
Developer | Alyssa |
Username | alyda |
Uploaded | September 08, 2022 |
Rating | 3 |
Size | 2,493 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
360 Image Slider | 6,477 Kb |
Evolve Patterns | 27,954 Kb |
Shadow Dom with Polymer | 2,879 Kb |
Strava JS API | 8,043 Kb |
Photo Gallery | 5,908 Kb |
Evolve Error Pages | 1,416 Kb |
Sass Photoshop to CSS letter-spacing function | 1,956 Kb |
Recommendation slider | 17,000 Kb |
Huddle Subway Map | 1,895 Kb |
CSS Patterns | 3,953 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Under construction | GhostRider | 1,642 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Nice textured background | Hans | 2,659 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!