Open renepickhardt opened 10 years ago
I think this plugin should be working even on static sites like jekyll. A markup like the one below could be easily generated by a JS.
<div class="gallery">
<a href="/path/to/img1.jpg">
<img src="/path/to/thumb1.jpg" alt="thumb1">
</a>
<a href="/path/to/img2.jpg">
<img src="/path/to/thumb2.jpg" alt="thumb1">
</a>
</div>
Thinking about a kind of API to achieve that more easily i could think of implementing something like a append functionality.
$('#gallery').justifyGallery({'append': true,
'images': [{'src': 'full1.jpg', 'thumb_src': 'thumb1.jpg', 'thumb_width': 150, 'thumb_height': 100},
{'src': 'full2.jpg', 'thumb_src': 'thumb2.jpg', 'thumb_width': 100, 'thumb_height': 150}]
});
where thumb_width, thumb_height could be optional.
would that satisfy your requirements to the lib?
it now should be possible to init the gallery such as:
$('#gallery').justifyGallery({'images': [{'src': 'full1.jpg', 'thumb_src': 'thumb1.jpg'},
{'src': 'full2.jpg', 'thumb_src': 'thumb2.jpg'}]
});
to append images to the gallery you can use:
$('#gallery').justifyGallery({'append': true,
'images': [{'src': 'full1.jpg', 'thumb_src': 'thumb1.jpg'},
{'src': 'full2.jpg', 'thumb_src': 'thumb2.jpg'}]
});
if you want to replace all images in the gallery you can use replace instead of append:
$('#gallery').justifyGallery({'replace': true,
'images': [{'src': 'full1.jpg', 'thumb_src': 'thumb1.jpg'},
{'src': 'full2.jpg', 'thumb_src': 'thumb2.jpg'}]
});
Will leave issue open for further discussion.
assume the max height of pictures was fixed as requested in bug #1 Then it should be fixed for a certain window size of the browser (making it responsive)
Especially the java script could get an API to automatically request thumbnails from the server once the window is resized in a way that new pictuers should be available.
This would align very well with the api of our image application server : https://github.com/renepickhardt/metalcon/wiki/componentImageApplicationServer
Additionally the gallery in the html would not need the thumbnail tags since they could be generated automatically.
so you could code the gallery with:
<div class="gallery"> <a href="/path/to/img1.jpg"> </a> <a href="/path/to/img2.jpg"> </a> </div>
or even just with an API call to an image server if some standard format for requesting galleries was applied / defined.