JSFiddle - React, Tailwind, and code Playground
HTML
<div class="gallery_photo_wrap">
<div class="gallery_bg_wrap">
<div class="gallery_bg" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" style="cursor:pointer;" title="dude" > <img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" height="148px" width="200px" border="0" /> </div>
</div>
</div>
CSS
#fancybox-left-ico {
left: 20px;
}
#fancybox-right-ico {
right: 20px;
left: auto;
}
JavaScript
$(".gallery_bg").fancybox({ //displaying images
/*openEffect : 'elastic',
closeEffect : 'elastic',
'cyclic':'true',
'scrolling':'yes',
'showNavArrows':'true',
helpers : {
title : {
type : 'inside'
}
}
*/
openEffect: 'elastic',
closeEffect: 'elastic',
showNavArrows: true,
closeBtn: false,
helpers: {
title: {
type: 'inside'
},
buttons: {}
}
});
/*
* FancyBox - jQuery Plugin
* Simple and fancy lightbox alternative
*
* Examples and documentation at: http://fancybox.net
*
* Copyright (c) 2008 - 2010 Janis Skarnelis
* That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
*
* Version: 1.3.4 (11/11/2010)
* Requires: jQuery v1.3+
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;
/*!
* fancyBox - jQuery Plugin
* version: 2.0.4 (12/12/2011)
* @requires jQuery v1.6 or later
*
* Examples at http://fancyapps.com/fancybox/
* License: www.fancyapps.com/fancybox/#license
*
* Copyright 2011 Janis Skarnelis - [email protected]
*
*/
(function (window, document, $) {
var W = $(window),
D = $(document),
F = $.fancybox = function () {
F.open.apply( this, arguments );
},
didResize = false,
resizeTimer = null;
$.extend(F, {
// The current version of fancyBox
version: '2.0.4',
defaults: {
padding: 15,
margin: 20,
width: 800,
height: 600,
minWidth: 200,
minHeight: 200,
maxWidth: 9999,
maxHeight: 9999,
autoSize: true,
fitToView: true,
aspectRatio: false,
topRatio: 0.5,
...