HPPNWYR
- #339 Set
box-sizing: content-box;
only for needed blocks inside a fotorama - #323 Fix autoplay interval corruption on mousemove
- #312 Let browsers round dimensions by themselfs
- #299 No more collecting fotorama usage statistics via foreign iframe.
Hot sorry
Fotorama 4.6.0 broke image fitting into stage (#286, #291, and many more in inbox). This release fixes that.
Some new features, meanwhile:
- New
enableifsingleframe
option. Default value isfalse
. Set it totrue
if you don’t want to disable fotorama navigation when it has only one frame. - Smarter autoplay. Now waits until the next frame is fully loaded.
Position
- New
position
andthumbposition
options. - Fix some IE7 & IE8 bugs (#273, #279).
- Fix thumbnail fit.
- Better auto initialization.
- Fix blocking event flow in some odd situations.
- #267 “Play” triangles on video thumbnails are back.
- Finally fix
clicktransition
behaviour. - Fix
fotorama:show
event triggering. - Some minor fixes and optimization.
Fotorama centers photos by default when fits them into a stage. Now you can change this:
<!-- Align photos to the left-top corner -->
<div class="fotorama" data-position="0 0">
<img src="1.jpg">
<!-- Override position for a single photo,
center 2.jpg horizontally, and move up by 10px -->
<img src="2.jpg" data-position="50% -10px">
<!-- Show the right-bottom corner of 3.jpg -->
<img src="3.jpg" data-position="100% 100%">
</div>
Works just like position
but for thumnbails.
Three years
🎂
- Keyboard accessibility, allow tabbing on arrows and thumbs.
- #255 Better styles for printing.
- New
controlsonstart
option. Set it tofalse
if you want controls to appear only after hover or tap. - New
thumbfit
option. - New
thumbratio:'auto'
option (experimental 💀). - #232 Simplify and fix logic when to trigger show events
- #236 Fix video loading on https
- Default cursor is now
pointer
because for desktop users one click is enough to switch the frame. Cursor changes tograb
only on dragging and swiping. - #246 Make fotorama monolithic with z-index.
- #251 Now fotorama’s dimensions are really the dimensions of the first image (by order, not by loading time).
- #253 Do not cache
$('html')
and$('body')
for correct fullscreen in single-page-apps (Meteor, Angular, Derby). - Fix
clicktransition
behaviour. - #243 Add missing dependencies and repository-setting to package.json
- Better image fit, work nice with odd width without Retina artefacts.
- Adjust animations.
- Disabled trackpad by default.
- Fix loop conditions.
🍬 🍬 🍬
Today is the third anniversary of Fotorama.
Using Fotorama? Be sure to drop me a link, wanna see it in action:
- PayPal: [email protected]
- Yandex.Money: 4100139676157
- Bitcoin: 1AbXUmE6xzinqKaHuTVFRXtnxffFqvKkka
- Flattr: Fotorama
Keep it ace
- Fix animations and visibility of arrows and captions.
- #181 Always visible arrows via
arrows:'always'
. - #214 Fullscreen mode now using complete width and surpass the
maxwidth
limit. - #218 Allow to hide captions via setOptions.
- Make
loop:true
andclicktransition:'crossfade'
play well together. - #219 Extended keyboard support.
- Fix some measures collisions.
- Optimize, test.
The old data-keyboard="true"
enables keyboard navigation with the arrows. Extend it passing the object with keys you want to turn on:
<div class="fotorama"
data-keyboard='{"space":true, "home":true, "end":true}'>
<img src="1.jpg">
<img src="2.jpg">
</div>
Yana
New options:
navwidth
— sets the special width of the nav;clicktransition
— alternative transition after click, now it is possible to slide after swipe and fade after click.
Now fotorama shows only first raw slide while initialization.
Class .fotorama--unobtrusive
makes fotorama unobtrusive and shows all raw slides,
use it when you care about users without JavaScript.
Closed issues:
- #159 Found the balance between swipe, click, and arrows.
- #160 Fixed tiny drag on the arrows.
- #174 Crush sprite files (via @zslabs).
- #187 Fix compatibility with
$.noConflict(true)
(via @Lendar). - #192 Fixed
stopautoplayontouch
. - #205 Fixed a typo that forced using the http protocol (via @dhayab).
Fixed glimpse
, nav overflow bug, and other minors.
Making it even better
Fixed issues:
- #115 Partially hidden fullscreen-icon
- #159 Some animation bugs.
- #160 Move-click-swipe tolerances.
- #161, #162 Recursion (when connecting some of the events and methods).
Five hot fixes
- Counterclockwise spinner if
direction:rtl
. - Fix onTouchEnd call. Fix infinite spinner which sometimes happened
- Fix doubled spinner.
- Remove stagetap event.
- More accurate deleting broken frames, good frames will not be flushed any more.
Spin the spinner
- New preloader (spin.js).
- Fix some issues with fade transitions in IE 7 and IE 8.
- Disable GPU compositing of frame when video plays.
- Cache image dimensions. Improved loading mechanics.
Optimizations
- More optimizations of GPU and CPU rendering.
GPU & Refreshing
- Optimize and reduce GPU layers, speedup Fotorama.
- Merge #131.
- #119 Fix load method.
- Better
startAutoplay
method and autoplay itself. - Throw error if no jQuery or it’s outdated.
- Fix glimpse unsetting with
setOptions
. - Update arrows in
fotorama.png
. - #116 Ability to center captions with
.fotorama__caption { text-align: center; }
.
Fine-tuning
- Fix pointer blinking.
- More friendly to browsers without JS and search engines.
- Fine-tuning of wheel and trackpad behaviour.
- Fix scroll on IE Mobile.
Options pack
- Horizontal wheel (two fingers on trackpad) enabled, disable with
data-wheel="false"
. - New options:
margin
,thumbmargin
,thumbborderwidth
,glimpse
. - Preloader for big images on fullscreen.
- Right-to-left direction in Fotorama:
data-direction="rtl"
option. - Support for additional params for YouTube and Vimeo links (like
&rel=0&vq=hd1080
). - Ability to simply override defaults with
fotoramaDefaults = {some: 'option'}
.
Minor optimizations.
Minor but sensitive
- Finally-finally fix artefacts on HDPI (Retina etc.) displays.
- Fix preloader, now it works with multiple fotoramas on the page.
- #66 Strange fix of strange FF bug (thanks @andreyvolokitin).
- #89 Fix bug when fotorama with crossfade transition get selected with the blue area in Chrome for Android.
- #91 Fix linear and radial gradients syntax to reach older browsers.
- #90 Now even FF 3.6.7 onboard.
- The new
startindex
option. It accepts frame index or id.
Perf from Roman Komarov
The first fruit of open source. Three pull requests (#77, #78, #79) from @kizu:
- Make edges of fotorama__nav clickable through.
- More optimal transition for arrows and icons.
- Smoothier transition for frame between different-width thumbnails.
- Remove pointer-events from active and disabled things.
Finally remove zooming artefacts on Retina displays. Some minor optimizations.
Bugfixes
- #55 Blink after fast-fast clicks with crossfade or dissolve transition.
- #58 Cannot read property '$navThumbFrame' of undefined.
- #60 IE8: Unable to get value of the property 'style': object is null or undefined.
- #62 Broken fullscreen if fotorama block has a
max-width
property. - #67 Broken keyboard navigation after destroying and recreating fotorama.
- #72 Undefined thumb aspect ratio on HTML frames.
- Fix image scalling artifacts on Retina displays.
- Better splitting of swipe and click
- Fix unloading videos
- Hide captions on videoplay
New fotorama:stagetap
event. More manual and auto tests. Optimizations.
Many thanks to all the issues reporters.
Mobile & speed
Windows Phone & Android support, better swipe & scroll, data
option to load from, tons of fixes.