DA NU
OK
Adresa ta de e-mail:.
captcha image

Abonează-mă Anulează
DATE DE CONECTARE




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

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;
Acum urmează scriptul jquery ce rulează în momentul în care o imagine cu clasa "imgP" este apăsată. Se citește atributul id-preview de la imaginea curentă și este căutată sursa imaginii cărei ii aparține acel id. DIV-ul cu id-ul blur este afișat iar în interiorul acestuia sunt scrise link-urile de comandă și imaginea mărită. Același div preia atributul "id-preview" de la imaginea curentă.
$('.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);
}
Funcția de închis galeria - o să ascundem div-ul cu id-ul "blur" și îi vom goli conținutul cu funcția .html()
$("#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

1. Exemplu-Galerie-de-imagini-jQuery-cu-swipe.zip
2. swipe-js.zip
Ultima modificare făcută de Sandu Marian Silviu la data 18.05.2020 23:32:13

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

top
TOP