diff --git a/README.md b/README.md index 16a61a2..5d334db 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,8 @@ Style with ``#fullsized_fullscreen`` **loop** (optional, defaults to false) - don't hide prev/next button on first/last image, so images are looped +**caption** (optional, defaults to false) - displays a caption at the bottom of the image. Caption can be set using ``title`` and ``alt`` attributes of the thumbnail. + ## Styling The packaged ``fullsizable.css`` stylesheet provides only the bare bones to make fullsizable work. Everything @@ -161,6 +163,12 @@ Triggers: ``fullsizable:open``, ``fullsizable:close``, ``fullsizable:next``, ``f ## Changelog +* **2.2.1** - 08.09.2017 + * small fix and improvement + +* **2.2.0** - 26.03.2017 + * added caption support + * **2.1.0** - 25.06.2015 * allow custom function for ``clickBehaviour`` option (thanks to MatoTominac) * add ``loop`` option (thanks to pohlaniacz) diff --git a/bower.json b/bower.json index 79c2510..2390557 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "jquery-fullsizable", - "version": "2.1.0", + "version": "2.2.1", "homepage": "http://mschmidt.github.io/jquery-fullsizable/", "authors": [ "Matthias Schmidt (http://pixelflush.com)" diff --git a/css/jquery-fullsizable-theme.css b/css/jquery-fullsizable-theme.css index 7c9ba10..fb19b97 100644 --- a/css/jquery-fullsizable-theme.css +++ b/css/jquery-fullsizable-theme.css @@ -1,3 +1,8 @@ +#fullsized_go_prev, #fullsized_go_next, #fullsized_close, #fullsized_fullscreen { + border: none; + padding: 0; + cursor: pointer; +} #fullsized_go_prev, #fullsized_go_next { position: absolute; top: 40%; diff --git a/css/jquery-fullsizable.css b/css/jquery-fullsizable.css index 9ebf03f..dfe80e0 100644 --- a/css/jquery-fullsizable.css +++ b/css/jquery-fullsizable.css @@ -13,7 +13,28 @@ background-position: 50% 50%; background-repeat: no-repeat; } +#fullsized_wrapper { + position: relative; + display: inline-block; + margin-left: 50%; +} +#fullsized_holder { + margin-left: -50%; +} #jquery-fullsizable #fullsized_image_holder img { display: block; - margin: 0 auto; + max-width: none; +} +#fullsized_caption_holder { + width: 100%; + position: absolute; + bottom: 0; + padding: 5px 10px; + box-sizing: border-box; + color: #ddd; + background: #666; /*Fallback for IE8*/ + background: rgba(102,102,102,0.4); } +.fullsizable-open { + overflow: hidden; +} \ No newline at end of file diff --git a/examples/simple.html b/examples/simple.html index b978560..b5cb46e 100644 --- a/examples/simple.html +++ b/examples/simple.html @@ -44,8 +44,8 @@ diff --git a/examples/themed_with_touch.html b/examples/themed_with_touch.html index 2d57118..cc04fbb 100644 --- a/examples/themed_with_touch.html +++ b/examples/themed_with_touch.html @@ -18,7 +18,7 @@