• Registered: 2014-05-14
  • Posts: 5

Topic: Embed vs iFrame from Flickr feed

I'm having trouble achieving the result I want - I'd like a single row of thumbnail images and then the user can click on one to get a larger view of an individual image. Images are coming from a Flickr album.

See here: http://www.digitdogs.co.uk/JB-Test/index.html
The top part of the page shows the result I get using embed code. Lower down the same page is an iFrame.
The iFrame is just what I want with a row of thumbs (would like thumbs to be bigger?) but when I click on one of the thumbs the large image is restricted by the iFrame height.
Is there a way of getting the image to open in a new window so that it fills the browser window?
Or is there another (better) way of achieving this?

Thanks for any help.
Steve

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Embed vs iFrame from Flickr feed

By default, a Splash Page is displayed when a gallery is embedded at less than 100% x 100% and displayed in Small Screen Mode.
The Splash Page is not displayed in the iframe gallery as the gallery is actually embedded (at 100% x 100%) into the HTML page being loaded into the iframe.
If you use the standard embedding code and do not want to use a Splash Page, then you can set showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).

(would like thumbs to be bigger?)

If using local images, you can set the dimensions of your gallery's thumbnails by clicking the 'Change Sizes...' button on the 'Images' tab. New thumbnails will be generated at the specified dimensions and the thumbWidth and thumbHeight configuration options will be set accordingly. For a Flickr gallery, just open your gallery's 'config.xml' file in a plain text editor and add entries such as thumbWidth="100" and thumbHeight="80" to the opening <juiceboxgallery> tag.

when I click on one of the thumbs the large image is restricted by the iFrame height.

A Juicebox gallery's dimensions do not change when clicking on a thumbnail image and it is not possible to treat the thumbnail page in Small Screen Mode like a Splash page (expanding the gallery on a thumbnail click).
It might be possible to achieve this (using the Juicebox-Pro API, CSS and JavaScript) but you may run into complications with the normal hide/show thumbnails and expand/close gallery functionality. You might need to use some variables to keep track of the expanded state of the gallery and the visibility of the thumbnails to avoid unnecessarily closing the gallery (via the toggleExpand() method) when a user clicks on a thumbnail whilst in expanded mode. It might become very complicated very quickly.
Perhaps the best option would be to disable the Splash Page (if you do not want to use it) and display the Expand Button (by setting showExpandButton="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Lite' section) so that users can expand the gallery fullscreen by clicking the button. (Please note that the Expand Button is disabled when using an iframe. This is noted in Option #2 here.)

  • Registered: 2014-05-14
  • Posts: 5

Re: Embed vs iFrame from Flickr feed

Thanks so much Steven.
The disable the Splash Page and using the embed code certainly helped. See revised page: http://www.digitdogs.co.uk/JB-Test/index.html
I still seem to have to constrain the height ... the settings for thumbnail rows and columns doesn't seem to have any effect. I'd also love it to go straight to full screen when clicking an image ... but i definitely don't want to get into complex coding!
Any other ideas appreciated but many thanks for help on this.
Steve

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Embed vs iFrame from Flickr feed

the settings for thumbnail rows and columns doesn't seem to have any effect.

The maxThumbRows and maxThumbColumns configuration options are used only in Large Screen Mode when the thumbnails and main images are displayed on the same page. In Small Screen Mode, the number of thumbnails displayed is determined by the size of the browser window and the thumbnails themselves.

Whether you expand the original gallery when a thumbnail is clicked or use a click handler on the thumbnails to load a new gallery displaying the selected image, you will still have the problem of the original gallery changing from the thumbnail page to a main image page. (It sounds like you want the thumbnails to act as links and to always be displayed as thumbnails on your main web page). Unfortunately, Juicebox was not designed to allow thumbnails to be used as links.

It sounds like one possible solution might be to create your own thumbnail links on your web page and link directly to corresponding images in a gallery by setting enableDirectLinks="TRUE" ('Customize -> General') and using URLs such as: http://www.example.com/gallery/#2 (for example, to display the 2nd image in the gallery).