0
Mon Js est très limité, alors ne me tirez pas dessus pour des erreurs ci-dessous. J'essaye d'ajouter quelques images stockées localement dans une grille de maçonnerie.Ajouter des images dans la grille de maçonnerie
Actuellement, lorsque je clique sur le bouton Ajouter, seule la dernière image de mon tableau est ajoutée.
Ce que j'essaie de faire est d'ajouter les 7 images suivantes à chaque clic du bouton.
$(document).ready(function() {
var $container = $('.templates');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.grid-item',
gutter: 12,
isFitWidth: true
});
});
// Click Function
$('#append-button').click(function() {
var $items = getItems();
// hide by default
$items.hide();
// append to container
$container.append($items);
$items.imagesLoaded().progress(function(imgLoad, image) {
// get item
// image is imagesLoaded class, not <img>
// <img> is image.img
var $item = $(image.img).parents('.grid-item');
// un-hide item
$item.show();
// masonry does its thing
$container.masonry('appended', $item);
});
});
});
// Images Array
function getItem() {
var $images = ['appply.jpg', 'athena.jpg', 'biz-dev-theme-responsive.jpg', 'boutique-woocommecre-theme.jpg', 'box-grid-theme-responsive.jpg', 'buro.jpg', 'circles-theme-responsive.jpg', 'deliciousmagazine.jpg', 'eshop-woocommerce-theme.jpg', 'fashion-style-wordpress-theme.jpg', 'forthecause.jpg', 'freelancer-theme-responsive.jpg', 'full-slider-theme-responsive.jpg', 'illustration-responsive-theme.jpg', 'large-grid-woocommerce-theme.jpg', 'maximize.jpg', 'olya.jpg', 'panoramic-theme-responsive.jpg', 'peddlar.jpg', 'pixelpress.jpg', 'resort.jpg', 'right-folio-theme-wordpress.jpg', 'sell-woocommerce-wordpress.jpg', 'sentient.jpg', 'shelflife.jpg', 'side-folio-theme-responsive.jpg', 'slider-scroll-wordpress.jpg', 'sliding.jpg', 'startup-responsive-theme.jpg', 'stitched.jpg', 'superstore.jpg', 'theonepager.jpg', 'upstart.jpg', 'vector-theme-responsive.jpg', 'videographer-responsive-theme.jpg', 'function.jpg', 'hub.jpg', 'memorable.jpg'];
for (var i = 0; i < $images.length; i++) {
var item = '<div class="grid-item">' + '<img src="/includes/images/wordpress/gallery/' + $images[i] + '" /></div>';
}
return item;
}
function getItems() {
var items = '';
for (var i = 0; i < 7; i++) {
items += getItem();
}
// return jQuery object
return $(items);
}.templates {
position: relative;
margin: 0 auto;
width: 100%;
}
.templates img {
width: 100%;
display: block;
height: auto;
}
.grid-item {
width: 20%;
padding: 12px;
margin-bottom: 12px;
border: solid 1px #666;
}
#append-button {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<div class="templates">
<div class="grid-item">
<img src="http://lorempixel.com/output/people-q-c-319-264-9.jpg" alt="">
</div>
</div>
<p>
<button id="append-button">Append new items</button>
</p>
Merci, bonne explication et un résultat parfait. – Aaron
Je me demandais quelle est cette fonction 'fonction concat (elem1, elem2)'? 'elem #' n'est défini nulle part. – Aaron
Un principe lors de la programmation "fonctionnelle" avec javascript, est des fonctions réutilisables. Ces fonctions reçoivent deux éléments et retournent la concat des deux. Puis j'ai utilisé dans la méthode ** reduce **, que les deux premiers paramètres sont l'élément accumulateur et l'élément courant, et enfin le résultat est une chaîne avec tous les éléments concaténés. –