AndresSanzG
commented
5 years ago I solve by my own. I hope my gallery help everyone who read this. You can see how it works in www.andressanz.es ### HTML:
``
<section class="portfolio">
<article>
<figure >
<figcaption> ILUSTRACIÓN</figcaption>
</figure>
<figure >
<figcaption> ILUSTRACIÓN 2</figcaption>
</figure>
<figure >
<figcaption> ILUSTRACIÓN 3</figcaption>
</figure>
<!-- You can put here how much figure galleries as you like-->
</article>
<div id="gallery">
<div class="galNav">
<div><</div>
<h3>Galeria Switch Touch</h3>
<div>></div>
<div class="icon-close"></div>
</div>
<div id="des1">
<div class="proyect">
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="gal">
<div class="menuGal">
<div></div>
<div class="imgGalBox"></div>
<div></div>
</div>
<div class="img">
<img src="img/basic/005b-portada-open.jpg" alt="Portada">
<h4>Imagen1</h4>
<p>Texto Bloque 1</p>
</div>
<div class="img">
<img src="img/basic/001b-portada.jpg" alt="Portada2">
<h4>Imagen2</h4>
<p>Texto Bloque 1</p>
</div>
<div class="img">
<img src="img/basic/002b-marcador.jpg" alt="Portada3">
<h4>Imagen3</h4>
<p>Texto Bloque 1</p>
</div>
<!-- You can put here how much .img blocks as you like-->
</div>
</div>
<!---------------------------------------------------------------------------------->
<div id="des2">
<div class="proyect">
<p>
Lorem ipsum dolor sit amet, conut aliquip ex ea commodo consequat.
</p>
</div>
<div class="gal">
<div class="menuGal">
<div></div>
<div class="imgGalBox"></div>
<div></div>
</div>
<div class="img">
<img src="img/basic/001b-iceberg.jpg" alt="Iceberg1">
<h4>Imagen1</h4>
<p>Texto Bloque 2</p>
</div>
<div class="img">
<img src="img/basic/portfolio/01-des/003b-accenture/001-billboard-iceberg.jpg" style="border: 1px solid #ccc;" alt="Portada de apertura del campeonato">
<h4>Imagen2</h4>
<p>Texto Bloque 1</p>
<!-- You can put here how much .img blocks as you like-->
</div>
</div>
</div>
<!---------------------------------------------------------------------------------->
<div id="des3">
<div class="proyect">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="gal">
<div class="menuGal">
<div></div>
<div class="imgGalBox"></div>
<div></div>
</div>
<div class="img">
<img src="img/basic/001b-alejandro.jpg" alt="cv1">
<h4>Imagen1</h4>
<p>Texto Bloque 3</p>
</div>
<div class="img">
<img src="img/basic/002b-guillermo.jpg" alt="cv2">
<h4>Imagen2</h4>
<p>Texto Bloque 3</p>
</div>
<div class="img">
<img src="img/basic/003b-julia.jpg" alt="cv3">
<h4>Imagen3</h4>
<p>Texto Bloque 3</p>
</div>
<div class="img">
<img src="img/basic/004-marta.jpg" alt="cv4">
<h4>Imagen4</h4>
<p>Texto Bloque 3</p>
</div>
<!-- You can put here how much .img blocks as you like-->
</div>
</div>
<!-- You can repeat here how much you want the process and create more galleries-->### JS/ JQUERY:
//Cerrar Gallery
$('#gallery .galNav .icon-close').click(function () {
$('#gallery').css('top', '-120%');
$('body, html').css('overflow-y', 'auto');
});
var idGal = $('#des1, #des2, #des3');
///Clickear cualquier figure
$('.portfolio figure').click(function () {
$('#gallery').css('top', '0');
idGal.css('display', 'none');
$('body, html').css('overflow-y', 'hidden');
//Click first figure
if ($(this).is(':nth-child(1)')) {
var prop = $('#des1');
var imgRute = '#des1 .gal .img';
var desList = $(imgRute).length;
prop.css('display', 'inline');
prop.find('.imgGalBox').empty();
}
//Click second figure
if ($(this).is(':nth-child(2)')) {
prop = $('#des2');
imgRute = '#des2 .gal .img';
desList = $(imgRute).length;
prop.css('display', 'inline');
prop.find('.imgGalBox').empty();
}
//Click third figure
if ($(this).is(':nth-child(3)')) {
prop = $('#des3');
imgRute = '#des3 .gal .img';
desList = $(imgRute).length;
prop.css('display', 'inline');
prop.find('.imgGalBox').empty();
}
//Creation of mini-menu of images re-using the images of the gallery
$(imgRute).find('img').each(function () {
var srcImg = $(this).attr('src');
prop.find('.imgGalBox').append('<img src="' + srcImg + '">');
});
//When you click on of this images, the gallerie change.
prop.find('.imgGalBox img').click(function () {
contDes = $(this).index();
cambioDes();
});
//Inicialitation of the variable and the function that makes the magic
var contDes = 0;
cambioDes();
//Click in the prev Button
prop.find('.gal .menuGal div:eq(0)').click(function () {
if (contDes > 0) {
contDes--;
cambioDes();
}
});
//Click in the next button
prop.find('.gal .menuGal div:eq(2)').click(function () {
if (contDes < desList - 1) {
contDes++;
cambioDes();
}
});
//Use the touchswipe plugin for the touch events
prop.find(".gal").swipe({
swipeStatus: function (event, phase, direction, distance, duration)
{
var str = "";
if ((phase == "move") && (direction == 'left')) {
str = distance;
prop.find('.gal.img').eq(contDes).css('transform', 'translateX(' + -distance * 2 + 'px)');
}
if ((phase == "move") && (direction == 'right')) {
str = distance;
prop.find('.gal.img').eq(contDes).css('transform', 'translateX(' + distance * 2 + 'px)');
}
if (phase == "end") {
str = direction;
prop.find('.gal.img').eq(contDes).css('transform', 'translateY(0px)');
if ((direction == 'left') && (contDes < desList)) {
contDes++;
cambioDes();
}
if ((direction == 'right') && (contDes > 0)) {
contDes--;
cambioDes();
}
}
if (phase == "move") {
str = duration + "ms";
prop.find('.gal.img').eq(contDes).css('transform', 'translateY(0px)');
}
if (phase == "cancel") {
prop.find('.gal.img').eq(contDes).css('transform', 'translateY(0px)');
}
},
triggerOnTouchEnd: false,
threshold: 0
});
//Function who makes the changes
function cambioDes() {
//Changes on the mini-menu images
prop.find('.imgGalBox img').css({
'filter': 'grayscale(100%)',
'transform': 'scale(1)'
});
prop.find('.imgGalBox img').eq(contDes).css({
'filter': 'grayscale(0%)',
'transform': 'scale(1.1)'
});
//Changes on the arrows
if (contDes == desList - 1) {
prop.find('.gal .menuGal div:eq(2)').fadeOut();
} else {
prop.find('.gal .menuGal div:eq(2)').fadeIn();
}
if (contDes == 0) {
prop.find('.gal .menuGal div:eq(0)').fadeOut();
} else {
prop.find('.gal .menuGal div:eq(0)').fadeIn();
}
//Console to see where do you are?
console.log(contDes + '---' + desList)
//Use the variable contDes to make the magic
if ((contDes >= 0) && (contDes < desList)) {
//We control the position before and after the image we are using
var preContDes = contDes - 1;
var postContDes = contDes + 1;
if (preContDes < 0) {
preContDes = 0;
}
if (postContDes > desList) {
preContDes = desList;
}
And then, we make the magic changing the classes
$(imgRute).removeClass('posG-Left posG-Right posG-Out');
$(imgRute + ':lt(' + contDes + ')').addClass('posG-Left');
$(imgRute + ':gt(' + contDes + ')').addClass('posG-Right');
$(imgRute + ':lt(' + preContDes + ')').addClass('posG-Out');
$(imgRute + ':gt(' + postContDes + ')').addClass('posG-Out');
}
}
});
### CSS:
/*Do what you want with the portfolio section and the figures.*/
/*GALERIA final*/
/*Menu Galeria*/
.gal{
position: relative;
width: 100%;
max-height: 70vh;
border: 1px solid blue;
}
.menuGal{
position: relative;
width: 70%;
margin: 0 auto;
height: 5vh;
border: 1px solid purple
}
.menuGal div{
position: absolute;
height: 100%;
top: 0;
}
.menuGal div:nth-child(1){
left: 0;
background: url(../img/icons/left.svg) no-repeat;
}
.menuGal div:nth-child(3){
right: 0;
background: url(../img/icons/rightEmp.svg) no-repeat;
}
.menuGal div:nth-child(1),
.menuGal div:nth-child(3){
width: 10%;
top: 15%;
height: 70%;
background-size: contain;
background-position: center;
cursor: pointer;
}
.imgGalBox{
display: inline-block;
text-align: center;
width: 80%;
left: 10%;
}
.imgGalBox img{
height: 100%;
margin: 0 5px;
filter: grayscale(100%);
transform: scale(1);
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.imgGalBox img:hover{
filter: grayscale(0%);
transform: scale(1.1);
}
/*Inside Galeria*/
.gal .img{
position: absolute;
left: 0; right: 0;
top: 0;
bottom: 0;
margin: auto;
margin-top: 7vh;
width: 70%;
height: auto;
/*transform: translateY(70%);*/
transition: all 0.5s ease-in-out;
}
.gal .img img{
position: absolute;
max-width: 95%;
max-height: 70vh;
left: 0; right: 0;
margin: auto;
background-size: contain;
transition: all 1s ease-in-out;
}
.gal .img h4, .gal .img p{
position: absolute;
text-align: center;
left: 0;
right: 0;
margin: auto;
top: 72vh;
}
.gal .img p{top: 75vh;}
.posG-Left{transform: translateX(-80%) scale(0.75); opacity:0.5}
.posG-Right{transform: translateX(80%) scale(0.75); opacity:0.5}
.posG-Out{opacity: 0}
I'm trying to use the same programming for several galleries, and I don't want to have to re-write the same code again and again. Is there any solution to this?