Add a button below the thumbnails (for the administration of photo information for example)
I load my images with URLs stored in database.
I build the tags contained in the rows retrieved according to my table like this :
while ($photo = mysqlfetcharray($photoQuery) ) {
$pathPetite = $path.'/'.$photo['petite'];
$pathGrande = $path.'/'.$photo['grande'];
$pathOriginale = $path.'/'.$photo['originale'];
$miniaturePath = $pathPetite;
$galeriePath = $pathGrande;
list($width, $height) = getimagesize($galeriePath);
echo '<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">';
echo ' <a href="./'.$galeriePath.'" itemprop="contentUrl" data-size="'.$width.'x'.$height.'">';
echo ' <center><img src="./'.$miniaturePath.'" itemprop="thumbnail" alt="'.$photo['description'].'" title="'.$photo['id'].'-'.$photo['originale'].'" /></center>';
echo ' </a>';
echo ' <figcaption itemprop_titre="'.$photo['titre'].'" itemprop_desc="'.$photo['description'].'" itemprop_originaleurl="'.$pathOriginale.'"></figcaption>';
if ($copocorp_user_id == $album['idUser']) {
sql2html("SELECT titre as 'Titre', description as 'Description', petite as 'Petite', grande as 'Grande', originale as 'Originale' FROM `copocorp_album_photo` WHERE id = ".$photo['id'], "Modifier", "id_".$photo['id']."_updatePhoto", "UPDATE", "btn btn-success dropdown-toggle");
}
echo '</figure>';
My function sql2html add a button and the pop-up windows linked.
But the problem is that if I click on the button, then the gallery loads and the pop-up is displayed in the background.
And after, if I click on the pop-up, or on the pop-up fields, the gallery still appears.
I suppose I have to modify this part of code :
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
To exclude the pop-up and the button of the item list, but I do not understand how to do this - If someone can help me, thank you very much to him
-
André Wolff commented
This has been implemented in the jAlbum PhotoSwipe skin, see http://jalbum.net/nl/skins/skin/PhotoSwipe To see it, open the sample album: http://andrewolff.jalbum.net/Reestdal_PS/