This question is not answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 0 - Pages: 1 Threads: [ Previous | Next ]
AndreWolff

Posts: 1,864
Registered: 14-Dec-2007
New version 1.3.8 of the FancyBox skin
Posted: 11-Jun-2018 19:50
 
  Click to reply to this thread Reply
The FancyBox skin uses as an option the Justified Gallery library to create a thumbnail table and the fancyBox library to create the slide page. Go to the Sample album page to see example albums made with this skin.

Changes in this new version:

  • Links are now displayed as bold, so you can now give the links in a description the same text color as normal text.
  • If the new check-mark 'Use Bootstrap to create menu with background color:' on the 'General' tab is set, the menu is made with the Bootstrap library. The background color of that menu is determined by the next color selector and next combo-box defines the alignment of the menu. See my France album for an example of this type of menu.
  • With a Bootstrap menu, the same colors as used in the Bootstrap menu are used for the Back buttons, in the About and other template files and for the buttons defined in the links tab if no icons are used and buttons are not displayed in a tool-bar.
  • The Bootstrap menu can collapse to an Hamburger icon:
  • If check-mark 'Replace menu bar by Hamburger button' is cleared, the Hamburger button will never be displayed and if set and the next width field is empty, the Hamburger button will always be displayed.
  • If check-mark 'Replace menu bar by Hamburger button' is set and a width is entered in the next field, the menu will be replaced by a Hamburger button at the indicated view-port width.
  • New menu home icon home icon with a color equal to the menu text color.
  • If check-mark 'Stop after the last slide' has been set and a slide-show has been started, the slide page will be closed after the last slide has been displayed.
  • If check-mark 'Show info window if you open the album' was set, the modal info page was not displayed at startup this has been corrected. However you should not set that check-mark if an album has folders!
  • Some layout changes in the Slide page / Options tab.
Changes in earlier versions:
  • The h1 tag CSS code has been moved from index.htt to common.css so that a selected Google Font can also be used in extra HTML files.
  • h2 and h3 CSS code added for extra HTML files.
  • You can now select for the album title a base font which is different from the base font used for the other texts.
  • It is now possible to see examples of the base fonts.

  • If check-mark 'Open first slide automatically' is set, thumbs are no longer removed.
  • Bug in panorama button detection solved.
  • You can now stop / start an embedded slide show which skips the index page and show no close button by clicking left or right of the image. See this album.
  • The new fancyBox library v3.5.7 version is now used.
  • If the Exif button was selected, the Exif info was not always displayed correctly, this has been corrected.
  • The arrow navigation buttons on mobile devices are now hidden, unless check-mark "Hide navigation arrows on mobile devices" on the Options tab of the Slide page settings is cleared.
  • It is now also for webLocations possible to show the title in the upper left corner.
  • If check-mark 'Use fancyBox defaults for the slide page' has not been set, a link in a slide description uses now the colors as indicated on the 'General' tab of the skin settings.
  • New check-mark 'Show description at the top of the window' at the Slide page / Layout tab. You should set this check-mark only if you have short slide comments.
  • The FancyBox skin can now play an audio file in the light-box. Click on the 9th thumbnail in this album to test it.

  • If the new check-mark "Compress panorama thumbnails" is set the ConstrainRatioFilter is used to compress the thumbnails of panorama photos. To see the difference compare this uncompressed album with this compressed album.
  • The Show location function shows now only the address information if the new check-mark "Show location address (Geocoding API required)" has been checked. To see the difference click the location button in this album without address info and in this album with address info.
  • The Full screen button on the index page was no longer working with the latest Google Chrome browser. This has been repaired with a new version v4.0.1 of the ScreenFull library.
  • For use in embedded albums are the map and panorama sections now also commented.
  • Next bugs solved in a multi index page album:
    • The Show location function works now also in such an album.
    • If check-mark 'Stop after the last slide' is set, the 'Next' navigation button is hidden for the last image and the 'Previous' navigation button is hidden for the first image

  • If you set the new check-mark: "Use the full size of the screen from edge to edge on an iPhone X(R/S/Max)", the slide image uses the whole area on the iPhone-X, but the notch and the rounded corners may hide a part of the image. To see it, open a slide page in this album on an iPhone X(R/S/M).
  • If a side panel with EXIF info is used, swiping over the EXIF info allows you to go to the next/previous slide, but the clicking on the EXIF info in a side panel does not remove the EXIF info. See thhis in the video/EXIF test album.
  • New check-mark "Open slide page in fullscreen mode", only enabled if check-box "Disable viewer settings" is set.
  • If check-mark 'Show shadows of panels on the index page' has been set, the thumbnails on the folder panels show no longer shadows. See the new look in this example album .
  • The option to hide scrollbars has been removed.
  • Check-mark "Clicking the up-arrow button returns to the previous page" has been removed, because it was not correctly working for albums with folders and you can get the same effect by entering 'javascript:history.back()' in the Parent page URL field.

  • The color and height of the slide show progress-bar are now selectable. Make the color transparent or the height=0 if you do not like to see a progress bar.
  • The arrow buttons do have now the same background color as the tool-bar buttons, the area around the arrow buttons get the color defined with 'Upper left corner info, description and arrow area background color'.
  • Two new inc-files required to make websites with the bootstrap library added: File page-header_00.inc inserts code in the <head> section directly after the title and before the link to the common.css file. File page-footer_00.inc inserts code just before the </body> tag, can be used for links to js-libraries. See this home page example album/
  • If in the skin was selected for the top row of buttons 'Show initially' or 'Hide initially' and the viewer did click one or more times in the theme image or the Title, the last type of display is remembered.
  • If the slide caption below the image requires more then 50% of the screen height, a vertical scroll-bar is added. See this example album.
  • If the description contains link code, the converted link is now shown in a thumbnail hint and in a possible description below the thumbnail on the index page.
  • It is now possible to replace on small devices the menu-bar by a Hamburger button, via the new check-mark 'Replace menu bar by Hamburger button, if view-port width <' on the 'General' tab. As an example open my Scandinavia album.
  • It is now also possible to define a maximum width for the profile image. As a result the profile images are now also responsive on mobile phones, see for example the height profiles of my gpx walkings in my Algarve album.
  • Problem with the More info link (...) solved, if on the Slide page both check-mark 'Use as background color for the description' and check-mark 'Fill box around the description and attach it to the image' have been set.
  • Check-mark 'Clicking the up-arrow button returns to the previous page' works now also correctly for an album with folders.
  • Corrected: If an album did contain only web locations, a start slide show button was missing, although the slide show was enabled.
  • Bug introduced in version1.3.2 with the tool-tip an album title with a background color solved.

  • More layout options for the description of the image on the slide page selectable with controls on the Slide Page / Layout tab in the group 'Show as description in the bottom caption bar or side panel':
  • You can now define the color of the description text independent of the other text colors.
  • The background color of this text can be set with check-mark 'Use as background color for the description' and next color selector. Both controls were already available in the previous versions, but they have now been moved to this group.
  • With the new check-mark 'Fill box around the description and attach it to the image', you can attach the description to the image. To see it open this example album.
  • It is now possible to show extended descriptions on a side panel with the new check-mark and width text box: "Show description in side panel with panel width:" in the same group. See this example album. The width of the side panel can be defined as % or as px. If check-mark Show description in side panel.." is checked, the Exif data are also left aligned displayed in that side panel. No panel is displayed if the caption is empty, however if Exif data are displayed via the Exif button, the side panel is also visible if the description is empty.
  • If check-mark "Display the panel alternately left / right of the image" is set, there is always a side panel visible and these panels are alternatively displayed left and right of the image. See this example album
  • To improve the readability of the album title in a theme image, the album title tool-tip shows now also the album title.
  • The Google maps windows show now a larger map.
  • Some text strings have been improved: "Show Slide Show button" has been changed into "Enable slide show" (for embedded album), 'Buttons color:' changed into 'Arrow- and tool-bar-buttons color:'. Some texts which could not been translated have been added to the text properties files.
  • Solved: Viewer setting 'Use full screen for a picture' was not immediately working after the viewer window was closed if no slide show was enabled.

  • If the album shows no theme image, the Facebook share function shows now another photo.
  • Check-mark 'Show shadow in title' has been moved to the Index page / General tab and is now also used if the title is outside the theme image. The title gets no longer automatically a shadow if check-mark 'Show shadows of panels on the index page' has been set.
  • New check-mark and color selector on the Index page / General: "Use as background color for the album title:", see the Fishermens Trail album for an example.
  • The Viewer settings window extended with question: 'Use full screen for a picture:' also for the iOS system. This allows you to display the slides in full screen mode also on an iPad.
  • New code for Theme image: theme image size should now be set in the Set Cropping window. The Theme Width and Theme Height fields on the Theme Image tab are removed.
  • With a new Share button it is now possible to use the fancyBox Share menu for sharing the Slide page on Facebook, Twitter and Pinterest.
  • If you click the Facebook Share button or the new Share button in the slide page tool-bar, the URL of the image and the URL of the web page are copied to the clipboard. This makes it easy to share the image and page in the native Facebook app and other apps. For example if you click the share button in this slide page the clipboard is loaded with this string: “https://www.andrewolff.nl/FotoSerie/Wandelingen/Berg_en_Dal/slides/Duivelsberg_140413_1056.jpg Web page: https://www.andrewolff.nl/FotoSerie/Wandelingen/Berg_en_Dal/#S-4”. If you drop this string in the Facebook “What are you doing?” box, you see after a while the corresponding picture. Next you can erase the first part of this string and use the part starting at Web page: to create a link to the web page.
  • Facebook Share code changed because of problems with the Facebook share function under iOS.
  • A folder image is now reduced in height if the image is larger as the folderbox.
  • New check-box 'Keep the common,css file locally' in the 'Fixed res path' group of the 'Web page' tab; only used if the 'Fixed res path' is not empty. This allows you for example to use another background image as used in the global res directory. As an example the next 3 albums Berg en Dal, Zaltbommel and Hurwenen use the same fixed res path. The Zaltbommel and Hurwenen do use the same Gray-Textile background. Berg en Dal uses another background image, so in that album check-mark 'Keep the common.css file locally' has been set.
  • New check-marks on the Index page / General: "Use as background color for the album description:" and "Fill box around the description". If both check-boxes and check-box "Show shadows on index page" have been checked, the Album description panel shows a shadow. For examples see the Fixed shape example album and the Berg en Dal album .
  • It is now possible to set the width of the the Album description panel, see the Fixed shape example album .
  • It is now possible to use as row height a percentage of the screen-height in landscape mode, both with or without the use of the justified-gallery, the minimum height is 50px and the maximum height is determined by the thumbnails image bounds, See here for an example album which uses the Justified-Gallery and here for an example of fixed ratio thumbnails where no Jusified-Gallery is used. View these albums on a smart phone and on a large monitor!
  • fancyBox library version 3.5.2 is now used.
  • New check-mark on the Slide page Layout tab: 'Prevent that the description overlaps the image'.
  • The slide page button hover-color has been changed from white to gray.
  • If the index page is skipped, a full-screen button can optionally be added to the slide page tool-bar.
  • The Zoom and Thumbnails buttons can now be hidden.
  • It is now again possible to work with empty Folder box width / height fields.
  • If a Folder box width was defined, the folder image could be distorted, this has been corrected.
  • Problems with invalid transition type, view-time and transit-time improved.

  • The new fancyBox library version 3.5.1 is now used.
  • Support for pdf files added, see this example album. Add a pdf-file via web location if you like to use your own thumbnail (thumbnails 6 & 7) else you see the standard Adobe PDF reader icon (thumbnail 8). You can also use a pdf-file as Info window (info button below the thumbnails) or open a pdf-file via a button on the index page (globe button below the thumbnails).
  • You can now make a link in the info window title with the [link text](link URL) code, to see it click the info button below the thumbnails in this example album.
  • Videos do now use the poster image generated by jAlbum (To see it, open this album on a mobile device.
  • To prevent empty tool-tips, all spaces around a comment are now removed.
  • Bug fix: Clicking outside the slide image on a mobile device did not stop the slide show.
  • Bug fix: Option 'Show info window if you open the album' was also not correctly working if a slide page was activated via a hash ('#') in the URL, both if the index page was skipped or not.
  • Bug fix: Option 'Show info window if you open the album' was not correctly working in an album with folders. That has been corrected now: only the top level album will show this window, not the folder albums.

  • The Music.htt template accepts now also ogg audio files.
  • New check-box 'Show info window if you open the album'. If set, the modal Info window is opened immediately if you open the album. See here for an example.
  • If 'Use fancyBox defaults for the slide page' is cleared, links in the slide caption use now the colors for links as set on the skins 'General'tab.
  • New check-mark "Clicking a 'More info' link opens a new window" on the Slide page options tab. If set, the extended comment displayed under a slide is displayed in a new modal window. The colors and the dimension of that new window are set on the 'Info window' tab. See here for an example.
  • If 'Stop after the last slide' has been checked, the right arrow button on the last slide and the left arrow button on the first slide are removed.
  • New include file page-header_embed.inc added for extra html code to embed an album in a web page. This code is inserted directly after the body tag before the <div id="indexDiv">. See here for an example of an embedded FancyBox light-box in a web-page.
  • New check-mark "Use fancybox-placeholder in an embedded album" used for embedded albums. See here for the recipe.
  • 'Use fancyBox defaults for the slide page' is no longer the default style for a new album.
  • It is now possible to change the foreground and background color of the tool-bar and navigation buttons. See here for an example.
  • The Expand-, Mail-, Exif, Facebook- and Location-buttons on the slide page are now all made by in-line svg strings.
  • With an include file js_code.inc it is now possible to add extra js-code at the end of the $(document).ready(function().
  • fancyBox library version 3.4.2 is now used.
  • Slideshow now waits for YouTube and Vimeo video to end. See here for an example.
  • After YouTube or Vimeo video ends, gallery will automatically move to the next slide.
  • Slide show shows a progress-bar.
  • Optional Tool-tips are now working on on all pages.
  • Problem with the colors of the info-bar solved.
  • The link to the skin page was incorrect, this has been repaired.
  • A swipe up / down in the info window is disabled if the text overflows, so if scrolling is required to read all text
  • New check-mark "Hide the buttons while the slide show is playing" on the Slide page / Options tab. If set the buttons will be hidden if the slide show is started. Click outside the image (or use the space bar on a PC) to stop the slide show and show the buttons again. Note that clicking outside the image, while a slide show is not active, will close the window. Clicking the esc key on a PC keyboard will immediately close the slide page.
  • It is now possible to show in the upper left corner of a slide page the image counter and/or the filename (with or without file extension) and/or the image title.
  • Two new fields to add a border the Justfied-Gallery thumbnails.
  • You can now use also ogg files as background music.
  • If the theme image is used as background, the theme image hint is now also 'Click to show or hide the top-buttons' if these buttons are initially hidden or shown.
  • fancyBox library version 3.4 is now used.
  • Clicking the slide show Play button in the upper right corner of the slide page shows now immediately the next slide.
  • Some bugs related to the new fancyBox 3.4 library solved.

  • The Info window is now closed by clicking the close button or using a swipe up / down or clicking the up-arrow key.
  • If check-mark Use Justified Gallery is cleared, the thumb gallery is now identical to the Variable # thumbnails / row layout as implemented in the Slide Show 4 skin and the PhotoSwipe skin, so video icon overlays and captions in the thumbnails are now possible.
  • New check-box: Use whole screen for slide image if screen height <. If set, the whole screen is used, so the tool-bar and the caption may overlay the image. If you enter a value for the minimum screen height after that check-mark, it is only applied for small devices with a screen height below the given value. In this example album it is only applied for a screen height < 400 px.
  • Bug fixes: Sometimes the Justified Gallery was not shown in maximized window mode on a PC with the Chrome and Firefox browsers. The implementation of an Album of albums has been corrected.

  • New tab added to the index page settings, to define an extra Info window as was already possible with the Slide Show 4 skin. However the FancyBox skin displays the Info window as a modal window. In this sample album the Info window is displayed if you click the 3th button from the right.
  • New check-mark "Disable Right Click and Long Tap context menu, to prevent 'Save as..'". If set, all context menus with items like 'Save picture as ...' and 'View source' are disabled, to make it difficult for a viewer to copy your images.
  • Some code changes to please HTML code validators.
  • If 'Show shadows on index page' is set, the thumbnails do get now also shadow.
  • HTML code tab moved to the Footer tab.
  • A CSS code panel has been added to the Web page tab, to insert custom CSS code at the end of the standard CSS code.

  • New check-mark 'Use Justified Gallery', if cleared the thumbnails gallery loads faster and you can use borders around the thumbnails. If the Justified Gallery is not used, video icon overlays and captions in the thumbnails are not possible. However video thumbnails can be indicated by a special border color and you can set check-mark 'Superimpose play icon onto video thumbnails' on the jAlbum Images / Advanced settings tab. See here for an album where the Justified gallery is not used.
  • Separate controls for thumbnail border width, radius and space to border for folder thumbnails and for image thumbnails in case Justified Gallery is not used.
  • Due to a bug in fancyBox gallery in case the expansion button was shown, it was not possible to process the click function correctly if an expansion button is showed. So only if check-mark "Don't use Panorama Viewers" is set, "Use 'Tap image' to start/stop Slide Show or for next image' is enabled.
  • Dead-zone and most special css tricks for the iPhone removed, because it did give problems with Chrome on the iPhone. You have now to shift the contents a little bit down on an iPhone in full screen landscape mode, before you click on a top-button or you should rotate the iPhone in portrait mode before you click a top-button.
  • The Google Maps close button is shifted down on an iPhone.
  • Check-mark 'Use slides images in gallery removed'; to avoid problems with folder thumbnails.
  • JustifiedGallery - v3.7.0 files are now used.
  • Top empty line removed if folders menu was selected, but screen height was too small.
  • The theme-image hint is now 'Click to show or hide the top-buttons' if these buttons are initially hidden or shown.

  • Thumbnails for video files, YouTube videos and Vimeo videos can optionally get a Video icon. See this album.
  • If a slide page is opened from a Google Map, it returns to this map is the close button is clicked.
  • The Slide caption text color was not always correct.
  • New check-mark: "Show thumbs after opening slide page". See here for an example.
  • Problem with "'" character in caption solved.
  • New color selector for bottom caption bar and arrow buttons background color.
  • If the slide page is opened in the Bridge projector index page, it returns now to the Bridge projector index page if the slide page is closed. See the Bridge projector test album.

  • Bug solved: Slide page location button, EXIF button etc. are now again working with Firefox vs 61
  • The full panoramic user panel is now visible ion the Explorer.
  • Cylindrical and Spherical panorama viewers implemented, see this cylindrical panorama test album and this spherical panorama test album.
  • The up-arrow key closes now a map, a panorama window or the slide page. The Esc key closes also a map, but next the slide page is also closed.
  • It is now possible to skip the preview of a spherical panorama.
  • Swipes are no longer processed in the panorama viewers, because the bottom buttons in the spherical viewer were not working on a mobile device.
  • A Slide Show stops now automatically if a video is displayed.
  • A new check-mark 'Start videos automatically' allows you to start videos automatically on a PC, but videos on a mobile device will mostly only play after you clicked the Play button. As an example in this video test album the videos do not start automatically.
  • A slide show does no longer interrupt videos: the slide-show pauses automatically if a video is opened and it continues automatically to the next slide if the playing of the video is finished. See this video test album for an example.

  • The slide show stops now if a Facebook share action is started.
  • Optional Mail-share added via Mail button in the slide page tool-bar.
  • The EXIF button is now only displayed for images.
  • If the original images are copied to the output directory, these images will be downloaded if the download image button is enabled.
  • FancyBox tool-bar buttons hints translated.
  • User manual adapted for FancyBox.
  • The Google Maps window and the Settings window is now a fancyBox modal window.
  • The modal viewer settings window contains now always a help and a close button.
  • If "Open first slide automatically" has been set, the index page is hidden via CSS code.
  • New check-mark "Hide tool-bar and arrows" to hide tool-bar and navigation arrows for use in embedded albums. See here an example of a embedded slide shows.
  • The FancyBox skin supports now the Jalbum Bridge projector, see here for an example.

  • Video support for native video files and for YouTube and Vimeo videos. See here for an example album. This album shows too how web locations are implemented.
  • No special panoramic pages have been implemented, but he resolution of panoramic pictures can be enlarged via the 'Panoramic image' panel. Via the zoom button on the slide page it is next possible to scroll through the panorama, see here for an example.
  • The features of the index page are the same as for the Slide Show 4 skin and the PhotoSwipe skin, but the FancyBox skin there is just one type of thumbnails gallery: the Justified Gallery. To improve the readability of filenames and captions for thumbnails, it is possible to use tool-tips, which works not only on a PC, but also on mobile devices.
  • The optional top line of the index page contains a button to open the help file, start a slide show, open a full screen window, navigate back to the parent album, navigation buttons for folder albums, share buttons for Facebook and email and finally a button to open the viewer settings window. Help is available in the following languages: Dutch, English, German, French, Spanish and Swedish. You can display this top line initially above or behind the theme image.
  • The viewer settings window allows you to adjust a number of properties: You can adapt the font size used for the descriptions: you may reduce the font size to 50% or enlarge it to 200%. In the same way you can adapt the button size. You can also adapt the viewing time per picture, the slide transition effect and the transition time in a slide show. You can also choose to disable the automatic start of background music if you open an album and you can chose to display the enlarged photos always in full screen mode.
  • The index pages can optionally be skipped to make a carousel album which can also be embedded in web-page. See here for an example
  • Include files allows you to make complete web-pages, see here for an example
Up to 7 text-buttons and / or icons may be displayed below the thumbs on the index page with as default functions:
  • Go to previous album
  • Download GPS track
  • Show route in a Google Maps web page
  • Show route in the Google Earth program. This map can be made with my program MakeMap.
  • Show a page with more information about the subject of the album.
  • Go to the Home web page
  • Go to next album
These functions may also be represented by text links in an optional menu bar at the top of the index page. These default functions are optional and can also be used by other functions, because you can define the text of these buttons.

A tool-bar with buttons above the light-box image allows you to
  • To zoom-in or zoom-out
  • To Start / Stop the slide show
  • To download the image
  • To show the EXIF data of the photo
  • To share the photo on Facebook
  • To. Share the photo via e-mail (vs 1.1.5)
  • To show the photo location in Google Maps
  • To open a thumbnails strip below the image
  • To close the light-box

Edited by: AndreWolff on 07-Dec-2018 08:32

Edited by: AndreWolff on 17-Dec-2018 15:07

Edited by: AndreWolff on 04-Mar-2019 10:33

Edited by: AndreWolff on 17-Apr-2019 10:30

Edited by: AndreWolff on 07-May-2019 10:21

Edited by: AndreWolff on 15-Jun-2019 18:57
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums