jquery - How can I implement Elastislide (content-box) in a Bootstrap 3.3.5 (border-box) project? -
i have trouble implementing elastislide image gallery bootstrap 3.
the elastislide html, css , jquery code i'm using here: http://bit.ly/1o01x3x.
i'm working bootstrap tutorials , examples w3schools: http://bit.ly/1sjzys4.
i have understood searching other similar issues on stackoverflow problem has box-sizing. bootstrap use box-sizing: border-box elastislide use box-sizing: content-box.
i have tried use suggestions one: http://bit.ly/1eceinm no success question is: how/where should apply code make elastislide work bootstrap 3?
gallery.php:
<!doctype html> <html lang="en"> <head> <title>test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="x-ua-compatible" content="ie=edge;chrome=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/elastislide.css" /> <link href='http://fonts.googleapis.com/css?family=pt+sans+narrow&v1' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=pacifico' rel='stylesheet' type='text/css' /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <noscript> <style> .es-carousel ul{ display:block; } </style> </noscript> <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl"> <div class="rg-image-wrapper"> {{if itemscount > 1}} <div class="rg-image-nav"> <a href="#" class="rg-image-nav-prev">previous image</a> <a href="#" class="rg-image-nav-next">next image</a> </div> {{/if}} <div class="rg-image"></div> <div class="rg-loading"></div> <div class="rg-caption-wrapper"> <div class="rg-caption" style="display:none;"> <p></p> </div> </div> </div> </script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-8"> <div class="content"> <h1>responsive image gallery <span>a jquery image gallery thumbnail carousel</span></h1> <div id="rg-gallery" class="rg-gallery"> <div class="rg-thumbs"> <!-- elastislide carousel thumbnail viewer --> <div class="es-carousel-wrapper"> <div class="es-nav"> <span class="es-nav-prev">previous</span> <span class="es-nav-next">next</span> </div> <div class="es-carousel"> <ul> <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="from off hill concave womb reworded" /></a></li> <li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="a plaintful story sistering vale" /></a></li> <li><a href="#"><img src="images/thumbs/3.jpg" data-large="images/3.jpg" alt="image03" data-description="a plaintful story sistering vale" /></a></li> <li><a href="#"><img src="images/thumbs/4.jpg" data-large="images/4.jpg" alt="image04" data-description="my spirits attend double voice accorded" /></a></li> <li><a href="#"><img src="images/thumbs/5.jpg" data-large="images/5.jpg" alt="image05" data-description="and down laid list sad-tuned tale" /></a></li> <li><a href="#"><img src="images/thumbs/6.jpg" data-large="images/6.jpg" alt="image06" data-description="ere long espied fickle maid full pale" /></a></li> <li><a href="#"><img src="images/thumbs/7.jpg" data-large="images/7.jpg" alt="image07" data-description="tearing of papers, breaking rings a-twain" /></a></li> <li><a href="#"><img src="images/thumbs/8.jpg" data-large="images/8.jpg" alt="image08" data-description="storming world sorrow's wind , rain" /></a></li> <li><a href="#"><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="image09" data-description="upon head platted hive of straw" /></a></li> <li><a href="#"><img src="images/thumbs/10.jpg" data-large="images/10.jpg" alt="image10" data-description="which fortified visage sun" /></a></li> <li><a href="#"><img src="images/thumbs/11.jpg" data-large="images/11.jpg" alt="image11" data-description="whereon thought might think sometime saw" /></a></li> <li><a href="#"><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="image12" data-description="the carcass of beauty spent , done" /></a></li> <li><a href="#"><img src="images/thumbs/13.jpg" data-large="images/13.jpg" alt="image13" data-description="time had not scythed youth begun" /></a></li> <li><a href="#"><img src="images/thumbs/14.jpg" data-large="images/14.jpg" alt="image14" data-description="nor youth quit; but, spite of heaven's fell rage" /></a></li> <li><a href="#"><img src="images/thumbs/15.jpg" data-large="images/15.jpg" alt="image15" data-description="some beauty peep'd through lattice of sear'd age" /></a></li> <li><a href="#"><img src="images/thumbs/16.jpg" data-large="images/16.jpg" alt="image16" data-description="oft did heave napkin eyne" /></a></li> <li><a href="#"><img src="images/thumbs/17.jpg" data-large="images/17.jpg" alt="image17" data-description="which on had conceited characters" /></a></li> <li><a href="#"><img src="images/thumbs/18.jpg" data-large="images/18.jpg" alt="image18" data-description="laundering silken figures in brine" /></a></li> <li><a href="#"><img src="images/thumbs/19.jpg" data-large="images/19.jpg" alt="image19" data-description="that season'd woe had pelleted in tears" /></a></li> <li><a href="#"><img src="images/thumbs/20.jpg" data-large="images/20.jpg" alt="image20" data-description="and reading contents bears" /></a></li> <li><a href="#"><img src="images/thumbs/21.jpg" data-large="images/21.jpg" alt="image21" data-description="as shrieking undistinguish'd woe" /></a></li> <li><a href="#"><img src="images/thumbs/22.jpg" data-large="images/22.jpg" alt="image22" data-description="in clamours of size, both high , low" /></a></li> <li><a href="#"><img src="images/thumbs/23.jpg" data-large="images/23.jpg" alt="image23" data-description="sometimes levell'd eyes carriage ride" /></a></li> <li><a href="#"><img src="images/thumbs/24.jpg" data-large="images/24.jpg" alt="image24" data-description="as did battery spheres intend" /></a></li> </ul> </div> </div> <!-- end elastislide carousel thumbnail viewer --> </div><!-- rg-thumbs --> </div><!-- rg-gallery --> <p class="sub">want more shakespeare? <a href="http://www.opensourceshakespeare.org/" target="_blank">http://www.opensourceshakespeare.org/</a></p> </div><!-- content --> </div> <div class="col-sm-4"><!-- nothing here yet --></div> </div> </div> </body> </html> elastislide.css:
/* elastislide style */ .es-carousel-wrapper{ background: #101010; padding:10px 27px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9); -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9); box-shadow:0px 1px 3px rgba(0, 0, 0, 0.9); position:relative; margin-bottom:20px; } .es-carousel{ overflow:hidden; background:#000; } .es-carousel ul{ display:none; } .es-carousel ul li{ height:100%; float:left; display:block; } .es-carousel ul li a{ display:block; border-style:solid; border-color:#222; opacity:0.8; -webkit-touch-callout:none; /* option */ -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .es-carousel ul li.selected a{ border-color:#fff; opacity:1.0; } .es-carousel ul li img{ display:block; border:none; max-height:100%; max-width:100%; } .es-nav span{ position:absolute; top:50%; left:8px; background:transparent url(../lib_images/img-gallery/nav_thumbs.png) no-repeat top left; width:14px; height:26px; margin-top:-13px; text-indent:-9000px; cursor:pointer; opacity:0.8; } .es-nav span.es-nav-next{ right:8px; left:auto; background-position:top right; } .es-nav span:hover{ opacity:1.0; } rg-gallery.css:
.rg-image-wrapper{ position:relative; padding:20px 30px; background:transparent url(../lib_images/img-gallery/black.png) repeat top left; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; min-height:20px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-image{ position:relative; text-align:center; line-height:0px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-image img{ max-height:100%; max-width:100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-image-nav a{ position:absolute; top:0px; left:0px; background:#000 url(../lib_images/img-gallery/nav.png) no-repeat -20% 50%; width:28px; height:100%; text-indent:-9000px; cursor:pointer; opacity:0.3; outline:none; -moz-border-radius: 10px 0px 0px 10px; -webkit-border-radius: 10px 0px 0px 10px; border-radius: 10px 0px 0px 10px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-image-nav a.rg-image-nav-next{ right:0px; left:auto; background-position:115% 50%; -moz-border-radius: 0px 10px 10px 0px; -webkit-border-radius: 0px 10px 10px 0px; border-radius: 0px 10px 10px 0px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-image-nav a:hover{ opacity:0.8; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-caption { text-align:center; margin-top:15px; position:relative; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-caption p{ font-size:11px; letter-spacing:2px; font-family: 'trebuchet ms', 'myriad pro', arial, sans-serif; line-height:16px; padding:0 15px; text-transform:uppercase; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-view{ height:30px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-view a{ display:block; float:right; width:16px; height:16px; margin-right:3px; background:#464646 url(../lib_images/img-gallery/views.png) no-repeat top left; border:3px solid #464646; opacity:0.8; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-view a:hover{ opacity:1.0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-view a.rg-view-full{ background-position:0px 0px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-view a.rg-view-selected{ background-color:#6f6f6f; border-color:#6f6f6f; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-view a.rg-view-thumbs{ background-position:0px -16px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .rg-loading{ width:46px; height:46px; position:absolute; top:50%; left:50%; background:#000 url(../lib_images/img-gallery/ajax-loader.gif) no-repeat center center; margin:-23px 0px 0px -23px; z-index:100; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; opacity:0.7; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } gallery.js:
$(function() { // ======================= imagesloaded plugin =============================== // https://github.com/desandro/imagesloaded // $('#my-container').imagesloaded(myfunction) // execute callback when images have loaded. // needed because .load() doesn't work on cached images // callback function gets image collection argument // container // original: mit license. paul irish. 2010. // contributors: oren solomianik, david desandro, yiannis chatzikonstantinou $.fn.imagesloaded = function( callback ) { var $images = this.find('img'), len = $images.length, _this = this, blank = 'data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///ywaaaaaaqabaaacauwaow=='; function triggercallback() { callback.call( _this, $images ); } function imgloaded() { if ( --len <= 0 && this.src !== blank ){ settimeout( triggercallback ); $images.off( 'load error', imgloaded ); } } if ( !len ) { triggercallback(); } $images.on( 'load error', imgloaded ).each( function() { // cached images don't fire load sometimes, reset src. if (this.complete || this.complete === undefined){ var src = this.src; // webkit hack http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f // data uri bypasses webkit log warning (thx doug jones) this.src = blank; this.src = src; } }); return this; }; // gallery container var $rggallery = $('#rg-gallery'), // carousel container $escarousel = $rggallery.find('div.es-carousel-wrapper'), // carousel items $items = $escarousel.find('ul > li'), // total number of items itemscount = $items.length; gallery = (function() { // index of current item var current = 0, // mode : carousel || fullview mode = 'carousel', // control if 1 image being loaded anim = false, init = function() { // (not necessary) preloading images here... $items.add('<img src="lib_images/img-gallery/ajax-loader.gif"/><img src="lib_images/img-gallery/black.png"/>').imagesloaded( function() { // add options _addviewmodes(); // add large image wrapper _addimagewrapper(); // show first image _showimage( $items.eq( current ) ); }); // initialize carousel if( mode === 'carousel' ) _initcarousel(); }, _initcarousel = function() { // using elastislide plugin: // http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/ $escarousel.show().elastislide({ imagew : 65, onclick : function( $item ) { if( anim ) return false; anim = true; // on click show image _showimage($item); // change current current = $item.index(); } }); // set elastislide's current current $escarousel.elastislide( 'setcurrent', current ); }, _addviewmodes = function() { // top right buttons: hide / show carousel var $viewfull = $('<a href="#" class="rg-view-full"></a>'), $viewthumbs = $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>'); $rggallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) ); $viewfull.on('click.rggallery', function( event ) { if( mode === 'carousel' ) $escarousel.elastislide( 'destroy' ); $escarousel.hide(); $viewfull.addclass('rg-view-selected'); $viewthumbs.removeclass('rg-view-selected'); mode = 'fullview'; return false; }); $viewthumbs.on('click.rggallery', function( event ) { _initcarousel(); $viewthumbs.addclass('rg-view-selected'); $viewfull.removeclass('rg-view-selected'); mode = 'carousel'; return false; }); if( mode === 'fullview' ) $viewfull.trigger('click'); }, _addimagewrapper= function() { // adds structure large image , navigation buttons (if total items > 1) // initializes navigation events $('#img-wrapper-tmpl').tmpl( {itemscount : itemscount} ).appendto( $rggallery ); if( itemscount > 1 ) { // addnavigation var $navprev = $rggallery.find('a.rg-image-nav-prev'), $navnext = $rggallery.find('a.rg-image-nav-next'), $imgwrapper = $rggallery.find('div.rg-image'); $navprev.on('click.rggallery', function( event ) { _navigate( 'left' ); return false; }); $navnext.on('click.rggallery', function( event ) { _navigate( 'right' ); return false; }); // add touchwipe events on large image wrapper $imgwrapper.touchwipe({ wipeleft : function() { _navigate( 'right' ); }, wiperight : function() { _navigate( 'left' ); }, preventdefaultevents: false }); $(document).on('keyup.rggallery', function( event ) { if (event.keycode == 39) _navigate( 'right' ); else if (event.keycode == 37) _navigate( 'left' ); }); } }, _navigate = function( dir ) { // navigate through large images if( anim ) return false; anim = true; if( dir === 'right' ) { if( current + 1 >= itemscount ) current = 0; else ++current; } else if( dir === 'left' ) { if( current - 1 < 0 ) current = itemscount - 1; else --current; } _showimage( $items.eq( current ) ); }, _showimage = function( $item ) { // shows large image associated $item var $loader = $rggallery.find('div.rg-loading').show(); $items.removeclass('selected'); $item.addclass('selected'); var $thumb = $item.find('img'), largesrc = $thumb.data('large'), title = $thumb.data('description'); $('<img/>').load( function() { $rggallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>'); if( title ) $rggallery.find('div.rg-caption').show().children('p').empty().text( title ); $loader.hide(); if( mode === 'carousel' ) { $escarousel.elastislide( 'reload' ); $escarousel.elastislide( 'setcurrent', current ); } anim = false; }).attr( 'src', largesrc ); }, additems = function( $new ) { $escarousel.find('ul').append($new); $items = $items.add( $($new) ); itemscount = $items.length; $escarousel.elastislide( 'add', $new ); }; return { init : init, additems : additems }; })(); gallery.init(); /* example add more items gallery: var $new = $('<li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="from off hill concave womb reworded" /></a></li>'); gallery.additems( $new ); */ }); there jquery.easing.1.3.js, jquery.elastislide.js, , jquery.tmpl.min.js. don't know if have paste code too?
Comments
Post a Comment