Gallery Custom Javascript - Jquery

Developer
Harley Santos Garzón
Size
2,820 Kb
Views
16,192
  1. Gallery Custom Javascript - Jquery Previews
  2. Gallery Custom Javascript - Jquery HTML Codes
  3. Gallery Custom Javascript - Jquery CSS Codes
  4. Gallery Custom Javascript - Jquery JS Codes

How do I make an gallery custom javascript - jquery?

Galería sencilla con pocas líneas de código y responsivo / Gallery simple with few lines of code and responsive.. What is a gallery custom javascript - jquery? How do you make a gallery custom javascript - jquery? This script and codes were developed by Harley Santos Garzón on 15 October 2022, Saturday.

Gallery Custom Javascript - Jquery Previews
IQ Test

Gallery Custom Javascript - Jquery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gallery Custom Javascript - Jquery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>What forces shape you?</h1>
<section class="gallery-container"> <!--El div .previa se acciona con js para realizar la vista de la imagen en tamaño grande width="525" height="600"--> <div id="previa"> <div id="imgFull"> <img src="" alt="" width="100%"/> </div> </div> <div class="gallery"> <img src="https://s-media-cache-ak0.pinimg.com/736x/8b/64/71/8b6471891abca49c20a1ea1db3218eea.jpg" alt="736x/8b/64/71/8b6471891abca49c20a1ea1db3218eea" width="225" height="300"/> <img src="https://s-media-cache-ak0.pinimg.com/736x/31/5f/72/315f728eaf61b1e3c253711d57ae65d5.jpg" alt="736x/31/5f/72/315f728eaf61b1e3c253711d57ae65d5" width="225" height="300"/> <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/e5/f7/9be5f790a236fa62c3b86e9f75925fde.jpg" alt="736x/9b/e5/f7/9be5f790a236fa62c3b86e9f75925fde" width="225" height="300"/> <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/4d/b8/d14db8b885a1807cc3c3b24bc4eab064.jpg" alt="736x/d1/4d/b8/d14db8b885a1807cc3c3b24bc4eab064" width="225" height="300"/> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Gallery Custom Javascript - Jquery - Script Codes CSS Codes

/*Font google Open Sans*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body { background: tomato; font-family: 'Open Sans', sans-serif;
}
h1 { text-align: center; font-weight: 700; font-size: 2em; color: #efefef; text-shadow: 1px 1px 1px #000; line-height: 1em; margin: 1em auto;
}
.gallery-container { position: relative; width: 80%; height: auto; margin: auto; z-index:10;
}
.gallery { position: relative; min-width: 300px; max-width: 100%; min-height: 300px; max-height: auto; margin: auto;
}
.gallery img { cursor: pointer; margin-left: 30px; margin-top: 20px; margin-bottom: 20px; display: inline;
}
/*Diseño del contenedor de la previa*/
#previa { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); cursor: pointer; z-index:100;
}
#imgFull { width: 400px; height: auto; margin: 6em auto; background: #000;
}
@media (min-width: 0px) and (max-width: 249px){ .gallery-container { display: none; }
}
@media (min-width: 250px) and (max-width: 479px) { .gallery-container { width: 225px; } .gallery img { margin-left: 0;
} #imgFull { width: 90%; }
}
@media (min-width: 480px) and (max-width: 767px) { .gallery-container { width: 480px; } .gallery img { margin-left: 8px;
}
}
@media (min-width: 768px) and (max-width: 1024px) { .gallery-container { width: 600px; } .gallery img { margin-left: 45px;
}
}
@media (min-width: 1025px) { .gallery-container { width: 1015px; } .gallery img { margin-left: 20px;
}
}

Gallery Custom Javascript - Jquery - Script Codes JS Codes

$(document).on('ready', inicio); // Funciones claves, apertura y cierre de vista previa function inicio(){ $('.gallery img').on('click', abrirFull); $('#previa').on('click', cerrarFull); } // function abrirFull(){ var nombre = $(this).attr('alt'), direccion = "https://s-media-cache-ak0.pinimg.com/" + nombre + ".jpg"; $('#imgFull img').attr('src', direccion); $('#previa').fadeIn(); }
function cerrarFull(){ $('#previa').fadeOut();
}
Gallery Custom Javascript - Jquery - Script Codes
Gallery Custom Javascript - Jquery - Script Codes
Home Page Home
Developer Harley Santos Garzón
Username HarleySG
Uploaded October 15, 2022
Rating 3
Size 2,820 Kb
Views 16,192
Do you need developer help for Gallery Custom Javascript - Jquery?

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!

Harley Santos Garzón (HarleySG) Script Codes
Name
Dinamic Menu with Angularjs
Custom Layout with Flexbox
Hangman
Angular-deckgrid - Like Pinterest Layout
Simple Exercise angular app
SVG loading infinite
Modal Image - bootstrap
Plantilla de estudio - Pug - Sass
Scroll Up With Js and Css
Timelinr Horizontal Custom
Create amazing captions 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!