iekadou / jquery-justifyGallery

A jQuery plugin to justify your Gallery.
MIT License
7 stars 0 forks source link

Define an API for dynamic thumbnails fetching from remote server #2

Open renepickhardt opened 10 years ago

renepickhardt commented 10 years ago

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.

iekadou commented 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?

iekadou commented 10 years ago

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.