Ajouter un bouton personnalisé à Galleria

Question

Je veux ajouter un bouton 'Acheter maintenant' à Galleria qui va déclencher l'ajout de l'image dans un panier visiteurs.

J'ai le code du panier déjà configuré, mais j'ai du mal à comprendre comment ajouter le bouton personnalisé à Galleria. J'utilise actuellement le thème classique et ai ajouté l'image dans map.png. Je peux installer le CSS sans problème mais ne peux pas comprendre comment coder l'extension à Galleria.

Toute aide grandement appréciée!

Answer 1

vous devriez envisager de construire your own theme. Galleria est « largement extensible », et vous pouvez ajouter votre bouton panier dans la fonction init de votre thème

Answer 2

Vous pouvez joindre un achat URL pour l'objet de données et puis attribuez-lui l'URL du bouton sur le image event:

HTML

<div> 
    <img src="one.jpg"> 
    <a href="buyone.html">Buy now</a> 
</div> 
<div> 
    <img src="two.jpg"> 
    <a href="buytwo.html">Buy now</a> 
</div> 

CSS (par exemple, le style que vous le souhaitez)

.galleria-button { 
    z-index:3; 
    padding:5px 10px; 
    background:#000; 
    color:#fff; 
    position:absolute; 
    top:20px; 
    left:20px; 
    cursor:pointer; 
} 

JS

$('#galleria').galleria({ 
    dataConfig: function(img) { 
    // return a new buylink key that points to the 
    // next anchor’s href attribute 
    return { buylink: $(img).next().attr('href') }; 
    }, 
    extend: function() { 

    // the current buy link 
    var buy; 

    // create the button and append it 
    this.addElement('button').appendChild('container','button'); 

    // Add text & click event using jQuery 
    this.$('button').text('Buy now').click(function() { 
     window.location = buy; 
    }); 

    // change the buy link on image 
    this.bind('image', function(e) { 
     buy = this.getData(e.index).buylink; 
    }); 
    } 
});