html5 - img1 displayed twice in Lightbox -
i have following html markup generated through php:
<a href="pic/img1.jpg" data-lightbox="gallery1" data-title="gallery1"> <div class="img-wrap"> <img src="pic/thumbs/img1.jpg"><span class="caption">gallery1</span></a> </div> <a href="pic/img2.jpg" data-lightbox="gallery1" data-title="gallery1"></a> <a href="pic/img3.jpg" data-lightbox="gallery1" data-title="gallery1"></a> <a href="pic/img4.jpg" data-lightbox="gallery1" data-title="gallery1"></a> <a href="pic/img5.jpg" data-lightbox="gallery1" data-title="gallery1"></a> <a href="pic/img6.jpg" data-lightbox="gallery1" data-title="gallery1"></a> <a href="pic/img7.jpg" data-lightbox="gallery1" data-title="gallery1"></a> the issue i'm having when clicking on thumbnail, lightbox loads img1 in position 2 of 8, , pressing in lightbox brings copy of img1. i'm thinking it's due light box including thumbnail img full size one.
any quick , easy solutions this??
it appears html invalid. you've got:
<a> <div> <img> <span> </a> </div> i suggest:
<div> <a> <img> <span> </a> </div> body { background-image:url("http://files.customize.org/thumbnails/larger/10302.jpg"); background-repeat: no-repeat; margin: 10px; } .thumb { border: 5px solid yellow; margin-right: 5px; } /* line 6, ../sass/lightbox.sass */ #lightboxoverlay { position: absolute; top: 0; left: 0; z-index: 9999; background-color: black; filter: progid:dximagetransform.microsoft.alpha(opacity=85); opacity: 0.85; display: none; } /* line 15, ../sass/lightbox.sass */ #lightbox { position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; font-family:"lucida grande", tahoma, verdana, arial, sans-serif; font-weight: normal; } /* line 24, ../sass/lightbox.sass */ #lightbox img { width: auto; height: auto; } /* line 27, ../sass/lightbox.sass */ #lightbox img { border: none; } /* line 30, ../sass/lightbox.sass */ .lb-outercontainer { position: relative; background-color: white; *zoom: 1; width: 250px; height: 250px; margin: 0 auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ .lb-outercontainer:after { content:""; display: table; clear: both; } /* line 39, ../sass/lightbox.sass */ .lb-container { padding: 10px; } /* line 42, ../sass/lightbox.sass */ .lb-loader { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } /* line 51, ../sass/lightbox.sass */ .lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } /* line 59, ../sass/lightbox.sass */ .lb-container > .nav { left: 0; } /* line 62, ../sass/lightbox.sass */ .lb-nav { outline: none; } /* line 65, ../sass/lightbox.sass */ .lb-prev, .lb-next { width: 49%; height: 100%; background-image: url("data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///yh5baeaaaaalaaaaaabaaeaaaibraa7"); /* trick ie showing hover */ display: block; } /* line 72, ../sass/lightbox.sass */ .lb-prev { left: 0; float: left; } /* line 76, ../sass/lightbox.sass */ .lb-next { right: 0; float: right; } /* line 81, ../sass/lightbox.sass */ .lb-prev:hover { background: url(http://lokeshdhakar.com/projects/lightbox2/images/prev.png) left 48% no-repeat; } /* line 85, ../sass/lightbox.sass */ .lb-next:hover { background: url(http://lokeshdhakar.com/projects/lightbox2/images/next.png) right 48% no-repeat; } /* line 88, ../sass/lightbox.sass */ .lb-datacontainer { margin: 0 auto; padding-top: 5px; *zoom: 1; width: 100%; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ .lb-datacontainer:after { content:""; display: table; clear: both; } /* line 95, ../sass/lightbox.sass */ .lb-data { padding: 0 10px; color: #bbbbbb; } /* line 98, ../sass/lightbox.sass */ .lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; } /* line 103, ../sass/lightbox.sass */ .lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; } /* line 107, ../sass/lightbox.sass */ .lb-data .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 11px; } /* line 112, ../sass/lightbox.sass */ .lb-data .lb-close { width: 35px; float: right; padding-bottom: 0.7em; outline: none; } /* line 117, ../sass/lightbox.sass */ .lb-data .lb-close:hover { cursor: pointer; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script> <div class="img-wrap"> <a href="http://lorempixel.com/400/200/?1" data-lightbox="gallery1" data-title="gallery1"> <img src="http://lorempixel.com/400/200/?2" /> <span class="caption">gallery1</span> </a> </div> <a href="http://lorempixel.com/400/200/?3" data-lightbox="gallery1" data-title="gallery1"></a> <a href="http://lorempixel.com/400/200/?4" data-lightbox="gallery1" data-title="gallery1"></a> <a href="http://lorempixel.com/400/200/?5" data-lightbox="gallery1" data-title="gallery1"></a> <a href="http://lorempixel.com/400/200/?6" data-lightbox="gallery1" data-title="gallery1"></a> <a href="http://lorempixel.com/400/200/?7" data-lightbox="gallery1" data-title="gallery1"></a> <a href="http://lorempixel.com/400/200/?8" data-lightbox="gallery1" data-title="gallery1"></a>
Comments
Post a Comment