Evolve Media Gallery

Developer
Alyssa
Size
2,493 Kb
Views
38,456
  1. Evolve Media Gallery Previews
  2. Evolve Media Gallery HTML Codes
  3. Evolve Media Gallery CSS Codes
  4. Evolve Media Gallery JS Codes

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 Previews
IQ Test

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&amp;rel=0&amp;enablejsapi=1&amp;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 */
Evolve Media Gallery - Script Codes
Evolve Media Gallery - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 2,493 Kb
Views 38,456
Do you need developer help for Evolve Media Gallery?

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!

Alyssa (alyda) Script Codes
Name
360 Image Slider
Evolve Patterns
Shadow Dom with Polymer
Strava JS API
Photo Gallery
Evolve Error Pages
Sass Photoshop to CSS letter-spacing function
Recommendation slider
Huddle Subway Map
CSS Patterns
Create amazing art & images with AI!

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!