Colorbox.css gallery is no longer working2019 Community Moderator ElectionWhy don't self-closing script tags work?Javascript or CSS hover not working in Safari and ChromeHelp loading “galleria” gallery with .loadHow do CSS triangles work?d3 - trigger event on second clickWhy does CSS work with fake elements?X Y Co-ordinates of Stacked BarCannot display HTML stringHow to parse the data which contains Html tags like style, color,font family, fontsize and set in textview in androidJavascript code executes correctly when debugging, but doesn't work without browser Dev Tools running
How do I hide Chekhov's Gun?
Do the common programs (for example: "ls", "cat") in Linux and BSD come from the same source code?
Non-trivial topology where only open sets are closed
How to write cleanly even if my character uses expletive language?
Aluminum electrolytic or ceramic capacitors for linear regulator input and output?
Is it possible to configure Nginx to accept requests both with and without proxy protocol to the same URL?
Can I use USB data pins as a power source?
"Words were different when they (lived / were living) inside of you"
Is it true that good novels will automatically sell themselves on Amazon (and so on) and there is no need for one to waste time promoting?
Why did it take so long to abandon sail after steamships were demonstrated?
Print a physical multiplication table
Bach's Toccata and Fugue in D minor breaks the "no parallel octaves" rule?
What options are left, if Britain cannot decide?
Examples of transfinite towers
How could a scammer know the apps on my phone / iTunes account?
Did Ender ever learn that he killed Stilson and/or Bonzo?
How to make healing in an exploration game interesting
How can we have a quark condensate without a quark potential?
What is "focus distance lower/upper" and how is it different from depth of field?
Why is the President allowed to veto a cancellation of emergency powers?
Is honey really a supersaturated solution? Does heating to un-crystalize redissolve it or melt it?
While on vacation my taxi took a longer route, possibly to scam me out of money. How can I deal with this?
Why does overlay work only on the first tcolorbox?
Simplify an interface for flexibly applying rules to periods of time
Colorbox.css gallery is no longer working
2019 Community Moderator ElectionWhy don't self-closing script tags work?Javascript or CSS hover not working in Safari and ChromeHelp loading “galleria” gallery with .loadHow do CSS triangles work?d3 - trigger event on second clickWhy does CSS work with fake elements?X Y Co-ordinates of Stacked BarCannot display HTML stringHow to parse the data which contains Html tags like style, color,font family, fontsize and set in textview in androidJavascript code executes correctly when debugging, but doesn't work without browser Dev Tools running
-1
I am using Dreamweaver to manage a website in HTML/CSS. This is the page in question: http://www.southholstonriverlodge.com/cabin%20rentals.html
I am using Urbanic Template http://www.templatemo.com/tm-395-urbanic
There is a colorbox gallery that was built in. Previously, on clicking the link, it would display a gallery of images. Now, it is only displaying one image, in a new screen.
I'm not sure what has changed. I have included the HTML snippet for for the colorbox, the colorbox.css and the jquery.colorbox-min.js
Any thoughts would be helpful as I'm at a dead end. Or if there's other info I could supply here to help find the issue.
/*!
Colorbox v1.5.4 - 2014-03-07
jQuery lightbox and modal window plugin
(c) 2014 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
*/
(function(t,e,i)(t(p),J=t.fn[Y]=t[Y]=function(e,i),t.isFunction(o)&&(o=t("<a/>"),e.open=!0),o[0]?(p(),m()&&(i&&(e.onComplete=i),o.each(function()).addClass(te),n=new r(o[0],e),n.get("open")&&f(o[0])),o):o,J.position=function(e,i),J.resize=function(t),J.prep=function(i)function o()return _.w=_.wfunction a()return _.h=_.hif(U)var d,g="none"===_.get("transition")?0:_.get("speed");I.remove(),I=n(se,"LoadedContent").append(i),I.hide().appendTo(M.show()).css(width:o(),overflow:_.get("scrolling")?"auto":"hidden").css(height:a()).prependTo(b),M.hide(),t(q).css("float":"none"),c(_.get("className")),d=function()a-1>A?"show":"hide"]().html(_.get("next")),P[_.get("loop"),"fade"===_.get("transition")?x.fadeTo(g,0,function()J.position(0,d)):J.position(g,d),J.next=function()W[A+1])&&(A=h(1),f(W[A])),J.prev=function()A)&&(A=h(-1),f(W[A])),J.close=function(),J.remove=function()x&&(x.stop(),t[Y].close(),x.stop(!1,!0).remove(),v.remove(),G=!1,x=null,t("."+te).removeData(Y).removeClass(te),t(e).unbind("click."+Z).unbind("keydown."+Z)),J.element=function()return t(_.el),J.settings=X))(jQuery,document,window);/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapperposition:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);
#cboxWrapper max-width:none;
#cboxOverlayposition:fixed; width:100%; height:100%;
#cboxMiddleLeft, #cboxBottomLeftclear:left;
#cboxContentposition:relative;
#cboxLoadedContentoverflow:auto; -webkit-overflow-scrolling: touch;
#cboxTitlemargin:0;
#cboxLoadingOverlay, #cboxLoadingGraphicposition:absolute; top:0; left:0; width:100%; height:100%;
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshowcursor:pointer;
.cboxPhotofloat:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;
.cboxIframewidth:100%; height:100%; display:block; border:0; padding:0; margin:0;
#colorbox, #cboxContent, #cboxLoadedContentbox-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlaybackground:#000; opacity: 0.9; filter: alpha(opacity = 90);
#colorboxoutline:0;
#cboxTopLeftwidth:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;
#cboxTopCenterheight:14px; background:url(images/border.png) repeat-x top left;
#cboxTopRightwidth:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;
#cboxBottomLeftwidth:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;
#cboxBottomCenterheight:43px; background:url(images/border.png) repeat-x bottom left;
#cboxBottomRightwidth:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;
#cboxMiddleLeftwidth:14px; background:url(images/controls.png) repeat-y -175px 0;
#cboxMiddleRightwidth:14px; background:url(images/controls.png) repeat-y -211px 0;
#cboxContentbackground:#fff; overflow:visible;
.cboxIframebackground:#fff;
#cboxErrorpadding:50px; border:1px solid #ccc;
#cboxLoadedContentmargin-bottom:5px;
#cboxLoadingOverlaybackground:url(images/loading_background.png) no-repeat center center;
#cboxLoadingGraphicbackground:url(images/loading.gif) no-repeat center center;
#cboxTitleposition:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;
#cboxCurrentposition:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active outline:0;
#cboxPreviousleft:0px; background-position: -51px -25px;
#cboxPrevious:hoverbackground-position:-51px 0px;
#cboxNextleft:27px; background-position:-75px -25px;
#cboxNext:hoverbackground-position:-75px 0px;
#cboxCloseright:0; background-position:-100px -25px;
#cboxClose:hoverbackground-position:-100px 0px;
.cboxSlideshow_on #cboxSlideshowbackground-position:-125px 0px; right:27px;
.cboxSlideshow_on #cboxSlideshow:hoverbackground-position:-150px 0px;
.cboxSlideshow_off #cboxSlideshowbackground-position:-150px -25px; right:27px;
.cboxSlideshow_off #cboxSlideshow:hoverbackground-position:-125px 0px;
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
<ul class="row row_team">
<div class="text-center">
<ul class="templatemo-project-gallery" >
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-graphic" >
<a class="colorbox" href="images/Caddis/21-IMG_7136_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/22-IMG_7142_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/23-IMG_7154_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/24-IMG_7157_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/25-IMG_7302_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/18-IMG_7119_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/17-IMG_7116_HDR.jpg" data-group="gallery-graphic">
<div class="templatemo-project-box">
<img src="images/Caddis_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Caddis</font><br> Click for images.</p>
<div class="project-overlay">
<h5>Spacious one room cabin furnished with two full beds and a sleeping loft with a twin bed. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-creative" >
<a class="colorbox" href="images/Bluewing/11-IMG_7038_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/13-IMG_7050_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/06-IMG_7062_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/07-IMG_7068_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/08-IMG_7071_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/29-IMG_7092_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/15-IMG_7098_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/01-IMG_7020_HDR.jpg" data-group="gallery-creative">
<div class="templatemo-project-box">
<img src="images/BWO_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Blue Wing Olive</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Can accommodate up to six fishermen or two small families. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-inspiration" >
<a class="colorbox" href="images/Mayfly/34-IMG_7208_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/33-IMG_7202_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/31-IMG_7193_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/32-IMG_7199_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/35-IMG_7217_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/09-IMG_7232_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/10-IMG_7235_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/36-IMG_7241.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/37-IMG_7223_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/30-IMG_7190_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/38-IMG_7172_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/39-IMG_7245_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/28-IMG_7166_HDR.jpg" data-group="gallery-inspiration">
<div class="templatemo-project-box">
<img src="images/Mayfly_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Mayfly</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Three story cabin nestled on the banks of the South Holston River.</h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-design" >
<a class="colorbox" href="images/Midge/43-IMG_7263_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/44-IMG_7272_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/45-IMG_7296_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/42-IMG_7287_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/40-IMG_7251_HDR.jpg" data-group="gallery-design">
<div class="templatemo-project-box">
<img src="images/Midge_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Midge</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Cozy one room cabin that is built on the hillside and overlooks the beautiful river. </h5>
</div>
</div>
</a>
</li>
</ul>jquery html css lightbox colorbox
asked Mar 6 at 20:58
GinaGina
12
add a comment |
-1
I am using Dreamweaver to manage a website in HTML/CSS. This is the page in question: http://www.southholstonriverlodge.com/cabin%20rentals.html
I am using Urbanic Template http://www.templatemo.com/tm-395-urbanic
There is a colorbox gallery that was built in. Previously, on clicking the link, it would display a gallery of images. Now, it is only displaying one image, in a new screen.
I'm not sure what has changed. I have included the HTML snippet for for the colorbox, the colorbox.css and the jquery.colorbox-min.js
Any thoughts would be helpful as I'm at a dead end. Or if there's other info I could supply here to help find the issue.
/*!
Colorbox v1.5.4 - 2014-03-07
jQuery lightbox and modal window plugin
(c) 2014 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
*/
(function(t,e,i)(t(p),J=t.fn[Y]=t[Y]=function(e,i),t.isFunction(o)&&(o=t("<a/>"),e.open=!0),o[0]?(p(),m()&&(i&&(e.onComplete=i),o.each(function()).addClass(te),n=new r(o[0],e),n.get("open")&&f(o[0])),o):o,J.position=function(e,i),J.resize=function(t),J.prep=function(i)function o()return _.w=_.wfunction a()return _.h=_.hif(U)var d,g="none"===_.get("transition")?0:_.get("speed");I.remove(),I=n(se,"LoadedContent").append(i),I.hide().appendTo(M.show()).css(width:o(),overflow:_.get("scrolling")?"auto":"hidden").css(height:a()).prependTo(b),M.hide(),t(q).css("float":"none"),c(_.get("className")),d=function()a-1>A?"show":"hide"]().html(_.get("next")),P[_.get("loop"),"fade"===_.get("transition")?x.fadeTo(g,0,function()J.position(0,d)):J.position(g,d),J.next=function()W[A+1])&&(A=h(1),f(W[A])),J.prev=function()A)&&(A=h(-1),f(W[A])),J.close=function(),J.remove=function()x&&(x.stop(),t[Y].close(),x.stop(!1,!0).remove(),v.remove(),G=!1,x=null,t("."+te).removeData(Y).removeClass(te),t(e).unbind("click."+Z).unbind("keydown."+Z)),J.element=function()return t(_.el),J.settings=X))(jQuery,document,window);/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapperposition:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);
#cboxWrapper max-width:none;
#cboxOverlayposition:fixed; width:100%; height:100%;
#cboxMiddleLeft, #cboxBottomLeftclear:left;
#cboxContentposition:relative;
#cboxLoadedContentoverflow:auto; -webkit-overflow-scrolling: touch;
#cboxTitlemargin:0;
#cboxLoadingOverlay, #cboxLoadingGraphicposition:absolute; top:0; left:0; width:100%; height:100%;
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshowcursor:pointer;
.cboxPhotofloat:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;
.cboxIframewidth:100%; height:100%; display:block; border:0; padding:0; margin:0;
#colorbox, #cboxContent, #cboxLoadedContentbox-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlaybackground:#000; opacity: 0.9; filter: alpha(opacity = 90);
#colorboxoutline:0;
#cboxTopLeftwidth:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;
#cboxTopCenterheight:14px; background:url(images/border.png) repeat-x top left;
#cboxTopRightwidth:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;
#cboxBottomLeftwidth:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;
#cboxBottomCenterheight:43px; background:url(images/border.png) repeat-x bottom left;
#cboxBottomRightwidth:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;
#cboxMiddleLeftwidth:14px; background:url(images/controls.png) repeat-y -175px 0;
#cboxMiddleRightwidth:14px; background:url(images/controls.png) repeat-y -211px 0;
#cboxContentbackground:#fff; overflow:visible;
.cboxIframebackground:#fff;
#cboxErrorpadding:50px; border:1px solid #ccc;
#cboxLoadedContentmargin-bottom:5px;
#cboxLoadingOverlaybackground:url(images/loading_background.png) no-repeat center center;
#cboxLoadingGraphicbackground:url(images/loading.gif) no-repeat center center;
#cboxTitleposition:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;
#cboxCurrentposition:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active outline:0;
#cboxPreviousleft:0px; background-position: -51px -25px;
#cboxPrevious:hoverbackground-position:-51px 0px;
#cboxNextleft:27px; background-position:-75px -25px;
#cboxNext:hoverbackground-position:-75px 0px;
#cboxCloseright:0; background-position:-100px -25px;
#cboxClose:hoverbackground-position:-100px 0px;
.cboxSlideshow_on #cboxSlideshowbackground-position:-125px 0px; right:27px;
.cboxSlideshow_on #cboxSlideshow:hoverbackground-position:-150px 0px;
.cboxSlideshow_off #cboxSlideshowbackground-position:-150px -25px; right:27px;
.cboxSlideshow_off #cboxSlideshow:hoverbackground-position:-125px 0px;
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
<ul class="row row_team">
<div class="text-center">
<ul class="templatemo-project-gallery" >
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-graphic" >
<a class="colorbox" href="images/Caddis/21-IMG_7136_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/22-IMG_7142_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/23-IMG_7154_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/24-IMG_7157_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/25-IMG_7302_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/18-IMG_7119_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/17-IMG_7116_HDR.jpg" data-group="gallery-graphic">
<div class="templatemo-project-box">
<img src="images/Caddis_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Caddis</font><br> Click for images.</p>
<div class="project-overlay">
<h5>Spacious one room cabin furnished with two full beds and a sleeping loft with a twin bed. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-creative" >
<a class="colorbox" href="images/Bluewing/11-IMG_7038_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/13-IMG_7050_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/06-IMG_7062_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/07-IMG_7068_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/08-IMG_7071_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/29-IMG_7092_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/15-IMG_7098_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/01-IMG_7020_HDR.jpg" data-group="gallery-creative">
<div class="templatemo-project-box">
<img src="images/BWO_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Blue Wing Olive</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Can accommodate up to six fishermen or two small families. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-inspiration" >
<a class="colorbox" href="images/Mayfly/34-IMG_7208_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/33-IMG_7202_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/31-IMG_7193_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/32-IMG_7199_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/35-IMG_7217_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/09-IMG_7232_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/10-IMG_7235_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/36-IMG_7241.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/37-IMG_7223_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/30-IMG_7190_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/38-IMG_7172_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/39-IMG_7245_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/28-IMG_7166_HDR.jpg" data-group="gallery-inspiration">
<div class="templatemo-project-box">
<img src="images/Mayfly_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Mayfly</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Three story cabin nestled on the banks of the South Holston River.</h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-design" >
<a class="colorbox" href="images/Midge/43-IMG_7263_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/44-IMG_7272_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/45-IMG_7296_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/42-IMG_7287_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/40-IMG_7251_HDR.jpg" data-group="gallery-design">
<div class="templatemo-project-box">
<img src="images/Midge_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Midge</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Cozy one room cabin that is built on the hillside and overlooks the beautiful river. </h5>
</div>
</div>
</a>
</li>
</ul>jquery html css lightbox colorbox
asked Mar 6 at 20:58
GinaGina
12
Step one to solving your problem: clean the HTML so you don't have like 5 colorbox links wrapping each other.
– imvain2
Mar 7 at 16:50
@imvain2 Okay, edits made. I've been searching through the coding to find any discrepancy. But this particular part was passed down when they asked me to update their site. I'm learning about it as I go and what steps they took in making it.
– Gina
Mar 7 at 19:58
add a comment |
-1
-1
-1
I am using Dreamweaver to manage a website in HTML/CSS. This is the page in question: http://www.southholstonriverlodge.com/cabin%20rentals.html
I am using Urbanic Template http://www.templatemo.com/tm-395-urbanic
There is a colorbox gallery that was built in. Previously, on clicking the link, it would display a gallery of images. Now, it is only displaying one image, in a new screen.
I'm not sure what has changed. I have included the HTML snippet for for the colorbox, the colorbox.css and the jquery.colorbox-min.js
Any thoughts would be helpful as I'm at a dead end. Or if there's other info I could supply here to help find the issue.
/*!
Colorbox v1.5.4 - 2014-03-07
jQuery lightbox and modal window plugin
(c) 2014 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
*/
(function(t,e,i)(t(p),J=t.fn[Y]=t[Y]=function(e,i),t.isFunction(o)&&(o=t("<a/>"),e.open=!0),o[0]?(p(),m()&&(i&&(e.onComplete=i),o.each(function()).addClass(te),n=new r(o[0],e),n.get("open")&&f(o[0])),o):o,J.position=function(e,i),J.resize=function(t),J.prep=function(i)function o()return _.w=_.wfunction a()return _.h=_.hif(U)var d,g="none"===_.get("transition")?0:_.get("speed");I.remove(),I=n(se,"LoadedContent").append(i),I.hide().appendTo(M.show()).css(width:o(),overflow:_.get("scrolling")?"auto":"hidden").css(height:a()).prependTo(b),M.hide(),t(q).css("float":"none"),c(_.get("className")),d=function()a-1>A?"show":"hide"]().html(_.get("next")),P[_.get("loop"),"fade"===_.get("transition")?x.fadeTo(g,0,function()J.position(0,d)):J.position(g,d),J.next=function()W[A+1])&&(A=h(1),f(W[A])),J.prev=function()A)&&(A=h(-1),f(W[A])),J.close=function(),J.remove=function()x&&(x.stop(),t[Y].close(),x.stop(!1,!0).remove(),v.remove(),G=!1,x=null,t("."+te).removeData(Y).removeClass(te),t(e).unbind("click."+Z).unbind("keydown."+Z)),J.element=function()return t(_.el),J.settings=X))(jQuery,document,window);/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapperposition:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);
#cboxWrapper max-width:none;
#cboxOverlayposition:fixed; width:100%; height:100%;
#cboxMiddleLeft, #cboxBottomLeftclear:left;
#cboxContentposition:relative;
#cboxLoadedContentoverflow:auto; -webkit-overflow-scrolling: touch;
#cboxTitlemargin:0;
#cboxLoadingOverlay, #cboxLoadingGraphicposition:absolute; top:0; left:0; width:100%; height:100%;
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshowcursor:pointer;
.cboxPhotofloat:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;
.cboxIframewidth:100%; height:100%; display:block; border:0; padding:0; margin:0;
#colorbox, #cboxContent, #cboxLoadedContentbox-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlaybackground:#000; opacity: 0.9; filter: alpha(opacity = 90);
#colorboxoutline:0;
#cboxTopLeftwidth:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;
#cboxTopCenterheight:14px; background:url(images/border.png) repeat-x top left;
#cboxTopRightwidth:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;
#cboxBottomLeftwidth:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;
#cboxBottomCenterheight:43px; background:url(images/border.png) repeat-x bottom left;
#cboxBottomRightwidth:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;
#cboxMiddleLeftwidth:14px; background:url(images/controls.png) repeat-y -175px 0;
#cboxMiddleRightwidth:14px; background:url(images/controls.png) repeat-y -211px 0;
#cboxContentbackground:#fff; overflow:visible;
.cboxIframebackground:#fff;
#cboxErrorpadding:50px; border:1px solid #ccc;
#cboxLoadedContentmargin-bottom:5px;
#cboxLoadingOverlaybackground:url(images/loading_background.png) no-repeat center center;
#cboxLoadingGraphicbackground:url(images/loading.gif) no-repeat center center;
#cboxTitleposition:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;
#cboxCurrentposition:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active outline:0;
#cboxPreviousleft:0px; background-position: -51px -25px;
#cboxPrevious:hoverbackground-position:-51px 0px;
#cboxNextleft:27px; background-position:-75px -25px;
#cboxNext:hoverbackground-position:-75px 0px;
#cboxCloseright:0; background-position:-100px -25px;
#cboxClose:hoverbackground-position:-100px 0px;
.cboxSlideshow_on #cboxSlideshowbackground-position:-125px 0px; right:27px;
.cboxSlideshow_on #cboxSlideshow:hoverbackground-position:-150px 0px;
.cboxSlideshow_off #cboxSlideshowbackground-position:-150px -25px; right:27px;
.cboxSlideshow_off #cboxSlideshow:hoverbackground-position:-125px 0px;
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
<ul class="row row_team">
<div class="text-center">
<ul class="templatemo-project-gallery" >
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-graphic" >
<a class="colorbox" href="images/Caddis/21-IMG_7136_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/22-IMG_7142_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/23-IMG_7154_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/24-IMG_7157_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/25-IMG_7302_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/18-IMG_7119_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/17-IMG_7116_HDR.jpg" data-group="gallery-graphic">
<div class="templatemo-project-box">
<img src="images/Caddis_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Caddis</font><br> Click for images.</p>
<div class="project-overlay">
<h5>Spacious one room cabin furnished with two full beds and a sleeping loft with a twin bed. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-creative" >
<a class="colorbox" href="images/Bluewing/11-IMG_7038_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/13-IMG_7050_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/06-IMG_7062_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/07-IMG_7068_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/08-IMG_7071_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/29-IMG_7092_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/15-IMG_7098_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/01-IMG_7020_HDR.jpg" data-group="gallery-creative">
<div class="templatemo-project-box">
<img src="images/BWO_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Blue Wing Olive</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Can accommodate up to six fishermen or two small families. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-inspiration" >
<a class="colorbox" href="images/Mayfly/34-IMG_7208_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/33-IMG_7202_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/31-IMG_7193_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/32-IMG_7199_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/35-IMG_7217_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/09-IMG_7232_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/10-IMG_7235_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/36-IMG_7241.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/37-IMG_7223_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/30-IMG_7190_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/38-IMG_7172_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/39-IMG_7245_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/28-IMG_7166_HDR.jpg" data-group="gallery-inspiration">
<div class="templatemo-project-box">
<img src="images/Mayfly_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Mayfly</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Three story cabin nestled on the banks of the South Holston River.</h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-design" >
<a class="colorbox" href="images/Midge/43-IMG_7263_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/44-IMG_7272_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/45-IMG_7296_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/42-IMG_7287_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/40-IMG_7251_HDR.jpg" data-group="gallery-design">
<div class="templatemo-project-box">
<img src="images/Midge_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Midge</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Cozy one room cabin that is built on the hillside and overlooks the beautiful river. </h5>
</div>
</div>
</a>
</li>
</ul>jquery html css lightbox colorbox
asked Mar 6 at 20:58
GinaGina
12
I am using Dreamweaver to manage a website in HTML/CSS. This is the page in question: http://www.southholstonriverlodge.com/cabin%20rentals.html
I am using Urbanic Template http://www.templatemo.com/tm-395-urbanic
There is a colorbox gallery that was built in. Previously, on clicking the link, it would display a gallery of images. Now, it is only displaying one image, in a new screen.
I'm not sure what has changed. I have included the HTML snippet for for the colorbox, the colorbox.css and the jquery.colorbox-min.js
Any thoughts would be helpful as I'm at a dead end. Or if there's other info I could supply here to help find the issue.
/*!
Colorbox v1.5.4 - 2014-03-07
jQuery lightbox and modal window plugin
(c) 2014 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
*/
(function(t,e,i)(t(p),J=t.fn[Y]=t[Y]=function(e,i),t.isFunction(o)&&(o=t("<a/>"),e.open=!0),o[0]?(p(),m()&&(i&&(e.onComplete=i),o.each(function()).addClass(te),n=new r(o[0],e),n.get("open")&&f(o[0])),o):o,J.position=function(e,i),J.resize=function(t),J.prep=function(i)function o()return _.w=_.wfunction a()return _.h=_.hif(U)var d,g="none"===_.get("transition")?0:_.get("speed");I.remove(),I=n(se,"LoadedContent").append(i),I.hide().appendTo(M.show()).css(width:o(),overflow:_.get("scrolling")?"auto":"hidden").css(height:a()).prependTo(b),M.hide(),t(q).css("float":"none"),c(_.get("className")),d=function()a-1>A?"show":"hide"]().html(_.get("next")),P[_.get("loop"),"fade"===_.get("transition")?x.fadeTo(g,0,function()J.position(0,d)):J.position(g,d),J.next=function()W[A+1])&&(A=h(1),f(W[A])),J.prev=function()A)&&(A=h(-1),f(W[A])),J.close=function(),J.remove=function()x&&(x.stop(),t[Y].close(),x.stop(!1,!0).remove(),v.remove(),G=!1,x=null,t("."+te).removeData(Y).removeClass(te),t(e).unbind("click."+Z).unbind("keydown."+Z)),J.element=function()return t(_.el),J.settings=X))(jQuery,document,window);/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapperposition:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);
#cboxWrapper max-width:none;
#cboxOverlayposition:fixed; width:100%; height:100%;
#cboxMiddleLeft, #cboxBottomLeftclear:left;
#cboxContentposition:relative;
#cboxLoadedContentoverflow:auto; -webkit-overflow-scrolling: touch;
#cboxTitlemargin:0;
#cboxLoadingOverlay, #cboxLoadingGraphicposition:absolute; top:0; left:0; width:100%; height:100%;
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshowcursor:pointer;
.cboxPhotofloat:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;
.cboxIframewidth:100%; height:100%; display:block; border:0; padding:0; margin:0;
#colorbox, #cboxContent, #cboxLoadedContentbox-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlaybackground:#000; opacity: 0.9; filter: alpha(opacity = 90);
#colorboxoutline:0;
#cboxTopLeftwidth:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;
#cboxTopCenterheight:14px; background:url(images/border.png) repeat-x top left;
#cboxTopRightwidth:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;
#cboxBottomLeftwidth:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;
#cboxBottomCenterheight:43px; background:url(images/border.png) repeat-x bottom left;
#cboxBottomRightwidth:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;
#cboxMiddleLeftwidth:14px; background:url(images/controls.png) repeat-y -175px 0;
#cboxMiddleRightwidth:14px; background:url(images/controls.png) repeat-y -211px 0;
#cboxContentbackground:#fff; overflow:visible;
.cboxIframebackground:#fff;
#cboxErrorpadding:50px; border:1px solid #ccc;
#cboxLoadedContentmargin-bottom:5px;
#cboxLoadingOverlaybackground:url(images/loading_background.png) no-repeat center center;
#cboxLoadingGraphicbackground:url(images/loading.gif) no-repeat center center;
#cboxTitleposition:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;
#cboxCurrentposition:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active outline:0;
#cboxPreviousleft:0px; background-position: -51px -25px;
#cboxPrevious:hoverbackground-position:-51px 0px;
#cboxNextleft:27px; background-position:-75px -25px;
#cboxNext:hoverbackground-position:-75px 0px;
#cboxCloseright:0; background-position:-100px -25px;
#cboxClose:hoverbackground-position:-100px 0px;
.cboxSlideshow_on #cboxSlideshowbackground-position:-125px 0px; right:27px;
.cboxSlideshow_on #cboxSlideshow:hoverbackground-position:-150px 0px;
.cboxSlideshow_off #cboxSlideshowbackground-position:-150px -25px; right:27px;
.cboxSlideshow_off #cboxSlideshow:hoverbackground-position:-125px 0px;
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
<ul class="row row_team">
<div class="text-center">
<ul class="templatemo-project-gallery" >
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-graphic" >
<a class="colorbox" href="images/Caddis/21-IMG_7136_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/22-IMG_7142_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/23-IMG_7154_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/24-IMG_7157_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/25-IMG_7302_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/18-IMG_7119_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/17-IMG_7116_HDR.jpg" data-group="gallery-graphic">
<div class="templatemo-project-box">
<img src="images/Caddis_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Caddis</font><br> Click for images.</p>
<div class="project-overlay">
<h5>Spacious one room cabin furnished with two full beds and a sleeping loft with a twin bed. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-creative" >
<a class="colorbox" href="images/Bluewing/11-IMG_7038_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/13-IMG_7050_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/06-IMG_7062_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/07-IMG_7068_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/08-IMG_7071_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/29-IMG_7092_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/15-IMG_7098_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/01-IMG_7020_HDR.jpg" data-group="gallery-creative">
<div class="templatemo-project-box">
<img src="images/BWO_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Blue Wing Olive</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Can accommodate up to six fishermen or two small families. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-inspiration" >
<a class="colorbox" href="images/Mayfly/34-IMG_7208_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/33-IMG_7202_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/31-IMG_7193_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/32-IMG_7199_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/35-IMG_7217_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/09-IMG_7232_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/10-IMG_7235_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/36-IMG_7241.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/37-IMG_7223_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/30-IMG_7190_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/38-IMG_7172_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/39-IMG_7245_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/28-IMG_7166_HDR.jpg" data-group="gallery-inspiration">
<div class="templatemo-project-box">
<img src="images/Mayfly_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Mayfly</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Three story cabin nestled on the banks of the South Holston River.</h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-design" >
<a class="colorbox" href="images/Midge/43-IMG_7263_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/44-IMG_7272_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/45-IMG_7296_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/42-IMG_7287_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/40-IMG_7251_HDR.jpg" data-group="gallery-design">
<div class="templatemo-project-box">
<img src="images/Midge_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Midge</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Cozy one room cabin that is built on the hillside and overlooks the beautiful river. </h5>
</div>
</div>
</a>
</li>
</ul>/*!
Colorbox v1.5.4 - 2014-03-07
jQuery lightbox and modal window plugin
(c) 2014 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
*/
(function(t,e,i)(t(p),J=t.fn[Y]=t[Y]=function(e,i),t.isFunction(o)&&(o=t("<a/>"),e.open=!0),o[0]?(p(),m()&&(i&&(e.onComplete=i),o.each(function()).addClass(te),n=new r(o[0],e),n.get("open")&&f(o[0])),o):o,J.position=function(e,i),J.resize=function(t),J.prep=function(i)function o()return _.w=_.wfunction a()return _.h=_.hif(U)var d,g="none"===_.get("transition")?0:_.get("speed");I.remove(),I=n(se,"LoadedContent").append(i),I.hide().appendTo(M.show()).css(width:o(),overflow:_.get("scrolling")?"auto":"hidden").css(height:a()).prependTo(b),M.hide(),t(q).css("float":"none"),c(_.get("className")),d=function()a-1>A?"show":"hide"]().html(_.get("next")),P[_.get("loop"),"fade"===_.get("transition")?x.fadeTo(g,0,function()J.position(0,d)):J.position(g,d),J.next=function()W[A+1])&&(A=h(1),f(W[A])),J.prev=function()A)&&(A=h(-1),f(W[A])),J.close=function(),J.remove=function()x&&(x.stop(),t[Y].close(),x.stop(!1,!0).remove(),v.remove(),G=!1,x=null,t("."+te).removeData(Y).removeClass(te),t(e).unbind("click."+Z).unbind("keydown."+Z)),J.element=function()return t(_.el),J.settings=X))(jQuery,document,window);/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapperposition:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);
#cboxWrapper max-width:none;
#cboxOverlayposition:fixed; width:100%; height:100%;
#cboxMiddleLeft, #cboxBottomLeftclear:left;
#cboxContentposition:relative;
#cboxLoadedContentoverflow:auto; -webkit-overflow-scrolling: touch;
#cboxTitlemargin:0;
#cboxLoadingOverlay, #cboxLoadingGraphicposition:absolute; top:0; left:0; width:100%; height:100%;
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshowcursor:pointer;
.cboxPhotofloat:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;
.cboxIframewidth:100%; height:100%; display:block; border:0; padding:0; margin:0;
#colorbox, #cboxContent, #cboxLoadedContentbox-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlaybackground:#000; opacity: 0.9; filter: alpha(opacity = 90);
#colorboxoutline:0;
#cboxTopLeftwidth:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;
#cboxTopCenterheight:14px; background:url(images/border.png) repeat-x top left;
#cboxTopRightwidth:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;
#cboxBottomLeftwidth:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;
#cboxBottomCenterheight:43px; background:url(images/border.png) repeat-x bottom left;
#cboxBottomRightwidth:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;
#cboxMiddleLeftwidth:14px; background:url(images/controls.png) repeat-y -175px 0;
#cboxMiddleRightwidth:14px; background:url(images/controls.png) repeat-y -211px 0;
#cboxContentbackground:#fff; overflow:visible;
.cboxIframebackground:#fff;
#cboxErrorpadding:50px; border:1px solid #ccc;
#cboxLoadedContentmargin-bottom:5px;
#cboxLoadingOverlaybackground:url(images/loading_background.png) no-repeat center center;
#cboxLoadingGraphicbackground:url(images/loading.gif) no-repeat center center;
#cboxTitleposition:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;
#cboxCurrentposition:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active outline:0;
#cboxPreviousleft:0px; background-position: -51px -25px;
#cboxPrevious:hoverbackground-position:-51px 0px;
#cboxNextleft:27px; background-position:-75px -25px;
#cboxNext:hoverbackground-position:-75px 0px;
#cboxCloseright:0; background-position:-100px -25px;
#cboxClose:hoverbackground-position:-100px 0px;
.cboxSlideshow_on #cboxSlideshowbackground-position:-125px 0px; right:27px;
.cboxSlideshow_on #cboxSlideshow:hoverbackground-position:-150px 0px;
.cboxSlideshow_off #cboxSlideshowbackground-position:-150px -25px; right:27px;
.cboxSlideshow_off #cboxSlideshow:hoverbackground-position:-125px 0px;
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
<ul class="row row_team">
<div class="text-center">
<ul class="templatemo-project-gallery" >
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-graphic" >
<a class="colorbox" href="images/Caddis/21-IMG_7136_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/22-IMG_7142_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/23-IMG_7154_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/24-IMG_7157_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/25-IMG_7302_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/18-IMG_7119_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/17-IMG_7116_HDR.jpg" data-group="gallery-graphic">
<div class="templatemo-project-box">
<img src="images/Caddis_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Caddis</font><br> Click for images.</p>
<div class="project-overlay">
<h5>Spacious one room cabin furnished with two full beds and a sleeping loft with a twin bed. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-creative" >
<a class="colorbox" href="images/Bluewing/11-IMG_7038_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/13-IMG_7050_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/06-IMG_7062_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/07-IMG_7068_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/08-IMG_7071_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/29-IMG_7092_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/15-IMG_7098_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/01-IMG_7020_HDR.jpg" data-group="gallery-creative">
<div class="templatemo-project-box">
<img src="images/BWO_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Blue Wing Olive</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Can accommodate up to six fishermen or two small families. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-inspiration" >
<a class="colorbox" href="images/Mayfly/34-IMG_7208_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/33-IMG_7202_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/31-IMG_7193_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/32-IMG_7199_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/35-IMG_7217_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/09-IMG_7232_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/10-IMG_7235_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/36-IMG_7241.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/37-IMG_7223_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/30-IMG_7190_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/38-IMG_7172_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/39-IMG_7245_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/28-IMG_7166_HDR.jpg" data-group="gallery-inspiration">
<div class="templatemo-project-box">
<img src="images/Mayfly_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Mayfly</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Three story cabin nestled on the banks of the South Holston River.</h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-design" >
<a class="colorbox" href="images/Midge/43-IMG_7263_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/44-IMG_7272_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/45-IMG_7296_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/42-IMG_7287_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/40-IMG_7251_HDR.jpg" data-group="gallery-design">
<div class="templatemo-project-box">
<img src="images/Midge_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Midge</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Cozy one room cabin that is built on the hillside and overlooks the beautiful river. </h5>
</div>
</div>
</a>
</li>
</ul>/*!
Colorbox v1.5.4 - 2014-03-07
jQuery lightbox and modal window plugin
(c) 2014 Jack Moore - http://www.jacklmoore.com/colorbox
license: http://www.opensource.org/licenses/mit-license.php
*/
(function(t,e,i)(t(p),J=t.fn[Y]=t[Y]=function(e,i),t.isFunction(o)&&(o=t("<a/>"),e.open=!0),o[0]?(p(),m()&&(i&&(e.onComplete=i),o.each(function()).addClass(te),n=new r(o[0],e),n.get("open")&&f(o[0])),o):o,J.position=function(e,i),J.resize=function(t),J.prep=function(i)function o()return _.w=_.wfunction a()return _.h=_.hif(U)var d,g="none"===_.get("transition")?0:_.get("speed");I.remove(),I=n(se,"LoadedContent").append(i),I.hide().appendTo(M.show()).css(width:o(),overflow:_.get("scrolling")?"auto":"hidden").css(height:a()).prependTo(b),M.hide(),t(q).css("float":"none"),c(_.get("className")),d=function()a-1>A?"show":"hide"]().html(_.get("next")),P[_.get("loop"),"fade"===_.get("transition")?x.fadeTo(g,0,function()J.position(0,d)):J.position(g,d),J.next=function()W[A+1])&&(A=h(1),f(W[A])),J.prev=function()A)&&(A=h(-1),f(W[A])),J.close=function(),J.remove=function()x&&(x.stop(),t[Y].close(),x.stop(!1,!0).remove(),v.remove(),G=!1,x=null,t("."+te).removeData(Y).removeClass(te),t(e).unbind("click."+Z).unbind("keydown."+Z)),J.element=function()return t(_.el),J.settings=X))(jQuery,document,window);/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapperposition:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);
#cboxWrapper max-width:none;
#cboxOverlayposition:fixed; width:100%; height:100%;
#cboxMiddleLeft, #cboxBottomLeftclear:left;
#cboxContentposition:relative;
#cboxLoadedContentoverflow:auto; -webkit-overflow-scrolling: touch;
#cboxTitlemargin:0;
#cboxLoadingOverlay, #cboxLoadingGraphicposition:absolute; top:0; left:0; width:100%; height:100%;
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshowcursor:pointer;
.cboxPhotofloat:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;
.cboxIframewidth:100%; height:100%; display:block; border:0; padding:0; margin:0;
#colorbox, #cboxContent, #cboxLoadedContentbox-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlaybackground:#000; opacity: 0.9; filter: alpha(opacity = 90);
#colorboxoutline:0;
#cboxTopLeftwidth:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;
#cboxTopCenterheight:14px; background:url(images/border.png) repeat-x top left;
#cboxTopRightwidth:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;
#cboxBottomLeftwidth:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;
#cboxBottomCenterheight:43px; background:url(images/border.png) repeat-x bottom left;
#cboxBottomRightwidth:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;
#cboxMiddleLeftwidth:14px; background:url(images/controls.png) repeat-y -175px 0;
#cboxMiddleRightwidth:14px; background:url(images/controls.png) repeat-y -211px 0;
#cboxContentbackground:#fff; overflow:visible;
.cboxIframebackground:#fff;
#cboxErrorpadding:50px; border:1px solid #ccc;
#cboxLoadedContentmargin-bottom:5px;
#cboxLoadingOverlaybackground:url(images/loading_background.png) no-repeat center center;
#cboxLoadingGraphicbackground:url(images/loading.gif) no-repeat center center;
#cboxTitleposition:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;
#cboxCurrentposition:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose border:0; padding:0; margin:0; overflow:visible; width:auto; background:none;
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active outline:0;
#cboxPreviousleft:0px; background-position: -51px -25px;
#cboxPrevious:hoverbackground-position:-51px 0px;
#cboxNextleft:27px; background-position:-75px -25px;
#cboxNext:hoverbackground-position:-75px 0px;
#cboxCloseright:0; background-position:-100px -25px;
#cboxClose:hoverbackground-position:-100px 0px;
.cboxSlideshow_on #cboxSlideshowbackground-position:-125px 0px; right:27px;
.cboxSlideshow_on #cboxSlideshow:hoverbackground-position:-150px 0px;
.cboxSlideshow_off #cboxSlideshowbackground-position:-150px -25px; right:27px;
.cboxSlideshow_off #cboxSlideshow:hoverbackground-position:-125px 0px;
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
<ul class="row row_team">
<div class="text-center">
<ul class="templatemo-project-gallery" >
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-graphic" >
<a class="colorbox" href="images/Caddis/21-IMG_7136_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/22-IMG_7142_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/23-IMG_7154_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/24-IMG_7157_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/25-IMG_7302_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/18-IMG_7119_HDR.jpg" data-group="gallery-graphic"></a>
<a class="colorbox" href="images/Caddis/17-IMG_7116_HDR.jpg" data-group="gallery-graphic">
<div class="templatemo-project-box">
<img src="images/Caddis_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Caddis</font><br> Click for images.</p>
<div class="project-overlay">
<h5>Spacious one room cabin furnished with two full beds and a sleeping loft with a twin bed. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-creative" >
<a class="colorbox" href="images/Bluewing/11-IMG_7038_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/13-IMG_7050_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/06-IMG_7062_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/07-IMG_7068_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/08-IMG_7071_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/29-IMG_7092_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/15-IMG_7098_HDR.jpg" data-group="gallery-creative"></a>
<a class="colorbox" href="images/Bluewing/01-IMG_7020_HDR.jpg" data-group="gallery-creative">
<div class="templatemo-project-box">
<img src="images/BWO_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Blue Wing Olive</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Can accommodate up to six fishermen or two small families. </h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-inspiration" >
<a class="colorbox" href="images/Mayfly/34-IMG_7208_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/33-IMG_7202_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/31-IMG_7193_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/32-IMG_7199_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/35-IMG_7217_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/09-IMG_7232_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/10-IMG_7235_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/36-IMG_7241.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/37-IMG_7223_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/30-IMG_7190_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/38-IMG_7172_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/39-IMG_7245_HDR.jpg" data-group="gallery-inspiration"></a>
<a class="colorbox" href="images/Mayfly/28-IMG_7166_HDR.jpg" data-group="gallery-inspiration">
<div class="templatemo-project-box">
<img src="images/Mayfly_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Mayfly</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Three story cabin nestled on the banks of the South Holston River.</h5>
</div>
</div>
</a>
</li>
<li class="col-lg-2 col-md-2 col-sm-2 gallery gallery-design" >
<a class="colorbox" href="images/Midge/43-IMG_7263_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/44-IMG_7272_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/45-IMG_7296_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/42-IMG_7287_HDR.jpg" data-group="gallery-design"></a>
<a class="colorbox" href="images/Midge/40-IMG_7251_HDR.jpg" data-group="gallery-design">
<div class="templatemo-project-box">
<img src="images/Midge_main.png" class="img-responsive" alt="gallery" />
<p><font size="+1">Midge</font><br>
Click for images.</p>
<div class="project-overlay">
<h5>Cozy one room cabin that is built on the hillside and overlooks the beautiful river. </h5>
</div>
</div>
</a>
</li>
</ul>jquery html css lightbox colorbox
jquery html css lightbox colorbox
asked Mar 6 at 20:58
GinaGina
12
asked Mar 6 at 20:58
GinaGina
12
edited Mar 7 at 19:56
Gina
asked Mar 6 at 20:58
GinaGina
12
asked Mar 6 at 20:58
GinaGina
12
asked Mar 6 at 20:58
GinaGina
12
12
Step one to solving your problem: clean the HTML so you don't have like 5 colorbox links wrapping each other.
– imvain2
Mar 7 at 16:50
@imvain2 Okay, edits made. I've been searching through the coding to find any discrepancy. But this particular part was passed down when they asked me to update their site. I'm learning about it as I go and what steps they took in making it.
– Gina
Mar 7 at 19:58
add a comment |
Step one to solving your problem: clean the HTML so you don't have like 5 colorbox links wrapping each other.
– imvain2
Mar 7 at 16:50
@imvain2 Okay, edits made. I've been searching through the coding to find any discrepancy. But this particular part was passed down when they asked me to update their site. I'm learning about it as I go and what steps they took in making it.
– Gina
Mar 7 at 19:58
Step one to solving your problem: clean the HTML so you don't have like 5 colorbox links wrapping each other.
– imvain2
Mar 7 at 16:50
Step one to solving your problem: clean the HTML so you don't have like 5 colorbox links wrapping each other.
– imvain2
Mar 7 at 16:50
@imvain2 Okay, edits made. I've been searching through the coding to find any discrepancy. But this particular part was passed down when they asked me to update their site. I'm learning about it as I go and what steps they took in making it.
– Gina
Mar 7 at 19:58
@imvain2 Okay, edits made. I've been searching through the coding to find any discrepancy. But this particular part was passed down when they asked me to update their site. I'm learning about it as I go and what steps they took in making it.
– Gina
Mar 7 at 19:58
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55032030%2fcolorbox-css-gallery-is-no-longer-working%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55032030%2fcolorbox-css-gallery-is-no-longer-working%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Step one to solving your problem: clean the HTML so you don't have like 5 colorbox links wrapping each other.
– imvain2
Mar 7 at 16:50
@imvain2 Okay, edits made. I've been searching through the coding to find any discrepancy. But this particular part was passed down when they asked me to update their site. I'm learning about it as I go and what steps they took in making it.
– Gina
Mar 7 at 19:58