Kris-B / nanoGALLERY

image gallery simplified - jQuery plugin. Touch enabled, responsive, justified/cascading/grid layout and it supports pulling in Flickr, Google Photos and self hosted images.
https://nanogallery2.nanostudio.org/
439 stars 101 forks source link

Question Ultra Clean look #108

Closed al-debaran closed 8 years ago

al-debaran commented 8 years ago

Hi Kris-b

Great gallery !

I’m interested in using your nanogallery, but with a very clean looking / stripped back / no clutter look .. so

a) In the main image view is there a way to remove the top right close icon, and the prev/ next icons on the left / right side of the image … maybe by adding properties to a custom colorSchemeViewer ? Then for navigation I would just use (on PC) the keyboard arrow keys or click on the left / right side of the image, or (on mobile ) swipe

b) Also for the thumbnails display is there a way to display just one thumbnail, for example the first one of the image list, or even I can define which one ? Then on clicking this I go straight to the main image view ?

Regards al-debaran

Kris-B commented 8 years ago

Hey @al-debaran !

a -> at this time you need to change the CSS file b -> use the parameter thumbnailAlbumDisplayImage

Hope this helps

al-debaran commented 8 years ago

Hi Kris-B again

Thanks for your quick answer !

About hiding the side next/prev and close icons .. OK I’ll mod the CSS . I have seen in Firebug which elements/classes are involved, but have not done anything yet

About only showing one thumb .. I’m not sure what you mean ..

1 - First … SORRY for writing so much !

2 - I found the thumbnailAlbumDisplayImage definition at http://nanogallery.brisbois.fr/#docThumbnailSettings , which says : “ thumbnailAlbumDisplayImage : On album's thumbnail click, displays the images instead of the thumbnails of the album's content ” .. but I still do not understand it.

3 - First just to clarify what I would like :

a - I would like to have a gallery where the images are self-hosted _(ie not flickr etc), and then use _the inline tag HREF method … like your example http://codepen.io/Kris-B/pen/dPxENe

b - But then, using your example, I would like that only one of the 3 _thumbs _is displayed, instead of one thumb for each image in the album. Then when I click this thumb then I go to the main image viewer as normal where I can manually scroll / slideshow through all images of the album . For the thumb, it would be good to specify which thumb.

c - Note, for me, this is just one way. I will also want to show all thumbs, and also use Flickr etc as an image source – as your demonstration.html examples. But for now I would like to have it as above.

4 - So in your inline example http://codepen.io/Kris-B/pen/dPxENe , I added the parameter thumbnailAlbumDisplayImage, and set to true and then false, but it has no effect. .

5 - And then I found the codepen ref : http://codepen.io/Kris-B/pen/vNNpNL = > nanoGALLERY / display one album and images only in lightbox a - I see this is an example where the image source is from Flickr b - I also notice just one thumb is displayed on start page. c - Here thumbnailAlbumDisplayImage is used and for true and false .. I see the difference False(default) => On clicking the start page thumb you see the complete set of images as thumbs in a table form, then click one of these thumbs – you then go to the scroll/slideshow main image viewer. True => On clicking the start page thumb you go straight to the scroll/slideshow main image viewer.

… So does param only affect nanogallery where the image source is a an online image sharing website ?

6 - So my question is : is there any way to get the effect of : http://codepen.io/Kris-B/pen/vNNpNL (with thumbnailAlbumDisplayImage = true) , BUT using self hosted images AND using the inline tag href method ?

7 - Just to say I can do what I want with some\ other galleries, by putting my own “wrapper”** around it as follows .. , but the galleries themselves are not as good as yours … a For example the old Fancybox 1 (http://fancybox.net/) , and also the new Fancybox 2 (http://fancyapps.com/fancybox/)

b - With both of these galleries you define each image of a gallery with an tag , like nanoGallery, but the gallery is identified by a rel or class attribute on EACH tag. And then : $(".mygalleryclass").fancybox( …);

c - Then I can add my own div around EACH tag , each with a style display.none, for all tags except the thumb I want to display. The Fancybox gallery with the above jQuery selector STILL works because the identifier is on the tag.

d - But I cannot do this with nanoGallery because you have the gallery identifier on an outer div with no identifier on the tags. So if I were to add my own div with display.none around each tag, then nanoGallery does not work because (I assume) it cannot find the tags because the select path is different … ..

8 - So in conclusion … is there another way to do what I want with your standard config, or can you suggest another way, eg edit/modify something somewhere ?

Regards al_debaran

Kris-B commented 8 years ago

hi @al-debaran

The parameter thumbnailAlbumDisplayImage is compatible with self hosted images. It's important to note that it will only work if you have albums.

Please check the codepen: http://codepen.io/Kris-B/pen/RNXmyv/ If you add thumbnailAlbumDisplayImage: true, you'll see the same effect as for Flickr.

al-debaran commented 8 years ago

Hi Kris-B

OK great .. Thats clear now ! I added thumbnailAlbumDisplayImage: true to codepen: http://codepen.io/Kris-B/pen/RNXmyv/ .. and it works fine . Thanks for you help

al-debaran

Kris-B commented 8 years ago

;-)