Galerie de imagini jQuery cu swipe / Image gallery with swipe using jQuery

1. Codul HTML

Partea afișată utilizatorului

Vom adăuga câteva proprietăți pentru a stiliza puțin afișarea imaginilor mărite. Bineînțeles acestea pot fi modificate după bunul plac.

În momentul când o imagine este apăsată, se deschide un fundal negru cu transparență 30% și imaginea marită la 90% din ecran apare în fața acestuia. Acest script selectează toate imaginile din site ce au clasa setată ca fiind "imgP" și creează o galerie cu acestea.

Pentru a schimba imaginile puteți folosi următoarele metode:

• schimbând din săgețile de la tastatură
• apăsând pe stânga sau dreapta imaginii
• folosind swipe de pe telefon 

<style type="text/css">
#blur{
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    margin:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:1;
    line-height:100%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:50px;
}
#blur div {
    position:relative;
    max-height: 90vh;
    max-width: 90%;
    margin:auto;
}
#blur img {
    position:relative;
    max-height: 90vh;
    max-width: 100%;
    margin:auto;
}
#blur div a#prevPreviewImage{
    background-image:url('left.svg');
    background-repeat:no-repeat;
    background-position:left;
    background-size:50px;
    position:absolute;
    display:block;
    top:50px;
    bottom:50px;
    left:0px;
    width:50%;
    text-decoration:none;
    opacity:0.5;
}
#blur div a#prevPreviewImage:hover{
    opacity:1;
}
#blur div a#nextPreviewImage{
    background-image:url('right.svg');
    background-repeat:no-repeat;
    background-position:right;
    background-size:50px;
    position:absolute;
    display:block;
    top:50px;
    bottom:50px;
    right:0px;
    width:50%;
    text-decoration:none;
    opacity:0.5;
}
#blur div a#nextPreviewImage:hover{
    opacity:1;
}
#blur div a#close{
    position:relative;
    display:block;
    text-align:right;
    text-decoration:none;
    opacity:0.5;
    font-weight:bold;
    color:#F00;
}
#blur div a#close:hover{
    opacity:1;
}
#blur span{
    display:block;
    text-align:center;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    font-weight:bold;
}
.imgP{
    height:100px;
    width:auto;
    cursor:pointer;
}
</style>

Următorul pas ar fi introducerea scriptului cu librăria pentru swipe. Aceasta o puteți descărca apăsând aici sau din partea de jos a paginii împreună cu restul fișierelor demonstrative.

 <script src="swipe.js"></script>

Imaginile vor fi scrise pe pagină sub forma:

<img src="imagini/numeFisier.jpg" class="imgP"/>

2. Scriptul jQuery

Creăm cu jquery un div cu id-ul "blur", acesta va fi fundalul

$("body").append('<div id="blur"></div>');

Acum vom aduna toate imaginile cu clasa "imgP" și le introducem într-o listă/array și introducem numărul imaginilor în variabila "totalImgs". În același timp fiecărei imagini i se adaugă un atribut pe nume "id-preview" cu un număr unic.

var imgs = [];
i = 1;
$('.imgP').each(function()
{
    imgs[i++] = $(this).attr('src');
    $(this).attr('id-preview',i-1);
});
var totalImgs = imgs.length-1;

$('.imgP').on('click', function(){
    var idImg = $(this).attr('id-preview');
    var img = imgs[idImg];
    $("#blur").css("display",'flex');	
    $("#blur").html('<div><a href="#" id="close">ÎNCHIDE (ESC)</a><img src="'+img+'"/><span>Imaginea '+idImg+' din '+totalImgs+'</span><a href="#" id="prevPreviewImage"></a><a href="#" id="nextPreviewImage"></a></div>');
    $("#blur").attr('id-preview',idImg);
    $("#blur").fadeIn("slow");	
});

Următorul pas este să creăm funcțiile pentru a afișa imaginea precedentă sau pe cea care urmează. Le vom denumi funcțiile nexImg() si prevImg(). Modul de funcționare este următorul, când funcția este chemată, valoarea atributului "id-preview" este stocată in variabila idImg ca număr. Variabila "idImgNou" va fi id-ul vechi +/- 1 după caz. În DIV-ul cu id-ul blur sunt scrise link-urile de comandă și imaginea nouă mărită. Atributul "id-preview" al div-ului este acum schimbat cu cel nou.

function nextImg(){
    var idImg = parseInt($("#blur").attr('id-preview'));
    var idImgNou = idImg+1;
    if(idImgNou > totalImgs) idImgNou = 1;
    var nextImg = imgs[idImgNou];
    $("#blur").html('<div><a href="#" id="close">ÎNCHIDE (ESC)</a><img src="'+nextImg+'"/><span>Imaginea '+idImgNou+' din '+totalImgs+'</span><a href="#" id="prevPreviewImage"></a><a href="#" id="nextPreviewImage"></a></div>');
    $("#blur").attr('id-preview',idImgNou);
}
function prevImg(){
    var idImg = parseInt($("#blur").attr('id-preview'));
    var idImgNou = idImg-1;
    if(idImgNou < 1) idImgNou = totalImgs;
    var nextImg = imgs[idImgNou];
    $("#blur").html('<div><a href="#" id="close">ÎNCHIDE (ESC)</a><img src="'+nextImg+'"/><span>Imaginea '+idImgNou+' din '+totalImgs+'</span><a href="#" id="prevPreviewImage"></a><a href="#" id="nextPreviewImage"></a></div>');
    $("#blur").attr('id-preview',idImgNou);
}

$("#blur").on('click', function(){
    $("#blur").fadeOut("slow");
    $("#blur").html('');
    $("#blur").css("background-image","none");
});

Acum să ne ocupăm de comenzile link-urilor și ale tastaturii.

//Comanda pentru link-ul close. Când va fi apăsat, va simula un click pe div-ul blur, acesta închizându-se
$("#blur").on( "click", "#close", function(){ $("#blur").click();});

//Când se apasă pe link-ul de pe laterala imaginii, va rula funcția nextImg sau prevImg, după caz
//funcția .stopPropagation() și preventDefault() împiedică click-ul să ajungă la div-ul blur, astfel se va închide galeria
$("#blur").on( "click", "#nextPreviewImage", function(e){
    e.stopPropagation();
    nextImg();
    e.preventDefault();
});
$("#blur").on( "click", "#prevPreviewImage", function(e){
    e.stopPropagation();
    prevImg();
    e.preventDefault();
});

//Când se apasă pe săgețile stânga(37) sau dreapta(39) va rula funcția nextImg sau prevImg, după caz
//Dacă se va apăsa tasta ESC(27), se va simula un click pe div-ul blur, acesta închizându-se
$("body").keydown(function(e) {
    if(e.keyCode == 37) prevImg();
});
$("body").keydown(function(e) {
    if(e.keyCode == 39) nextImg();
});
$("body").keydown(function(e) {
    if(e.keyCode == 27) $("#blur").click();
});

Swipe, această funcție rulează doar pe telefon. Dacă dorești să nu incluzi fișierul swipe.js în pagină atunci să nu pui nici acest script, altfel nu vor funcționa scripturile.

Cum funcționează?! Când se face swipe spre dreapta, va rula funcția prevImg() iar când se dă spre stânga va rula nextImg();

$("#blur").onSwipe(function(results){
    if(results.right) prevImg();
    if(results.left) nextImg();
});

Codul complet

<script>
$(document).ready(function(e) {
    $("body").append('<div id="blur"></div>'); // Creează div-ul cu fundalul negru

    var imgs = [];
    i = 1;
    $('.imgP').each(function()
    {
    	imgs[i++] = $(this).attr('src');
        $(this).attr('id-preview',i-1);
    });
    var totalImgs = imgs.length-1;

    $('.imgP').on('click', function(){
        var idImg = $(this).attr('id-preview');
        var img = imgs[idImg];
        $("#blur").css("display",'flex');	
        $("#blur").html('<div><a href="#" id="close">ÎNCHIDE (ESC)</a><img src="'+img+'"/><span>Imaginea '+idImg+' din '+totalImgs+'</span><a href="#" id="prevPreviewImage"></a><a href="#" id="nextPreviewImage"></a></div>');
        $("#blur").attr('id-preview',idImg);
        $("#blur").fadeIn("slow");	
    });

    $("#blur").on( "click", "#close", function(){ $("#blur").click();});

    $("#blur").on( "click", "#nextPreviewImage", function(e){
        e.stopPropagation();
        nextImg();
        e.preventDefault();
    });
    $("#blur").on( "click", "#prevPreviewImage", function(e){
        e.stopPropagation();
        prevImg();
        e.preventDefault();
    });

    $("body").keydown(function(e) {
        if(e.keyCode == 37) prevImg();
    });
    $("body").keydown(function(e) {
        if(e.keyCode == 39) nextImg();
    });
    $("body").keydown(function(e) {
        if(e.keyCode == 27) $("#blur").click();
    });

    function nextImg(){
        var idImg = parseInt($("#blur").attr('id-preview'));
        var idImgNou = idImg+1;
        if(idImgNou > totalImgs) idImgNou = 1;
        var nextImg = imgs[idImgNou];
        $("#blur").html('<div><a href="#" id="close">ÎNCHIDE (ESC)</a><img src="'+nextImg+'"/><span>Imaginea '+idImgNou+' din '+totalImgs+'</span><a href="#" id="prevPreviewImage"></a><a href="#" id="nextPreviewImage"></a></div>');
        $("#blur").attr('id-preview',idImgNou);
    }
    function prevImg(){
        var idImg = parseInt($("#blur").attr('id-preview'));
        var idImgNou = idImg-1;
        if(idImgNou < 1) idImgNou = totalImgs;
        var nextImg = imgs[idImgNou];
        $("#blur").html('<div><a href="#" id="close">ÎNCHIDE (ESC)</a><img src="'+nextImg+'"/><span>Imaginea '+idImgNou+' din '+totalImgs+'</span><a href="#" id="prevPreviewImage"></a><a href="#" id="nextPreviewImage"></a></div>');
        $("#blur").attr('id-preview',idImgNou);
    }
    $("#blur").on('click', function(){
        $("#blur").fadeOut("slow");
        $("#blur").html('');
        $("#blur").css("background-image","none");
    });

    $("#blur").onSwipe(function(results){
        if(results.right) prevImg();
        if(results.left) nextImg();
    });
});
</script>

3. Rezultatul final

Fișiere atașate articolului

Dacă ți-a plăcut articolul, ajută-ne cu un share:
Distribuie Tweet Whatsapp Telegram

Citește și alte articole legate de galerie imagini, jquery, swipe