Shannon

I am having the sort of the same problem, however none of my images are working in fancybox.

I have checked to be sure that the box is checked
Mystique Settings>Advanced>Enable theme built-in lightbox on all image links. Still nothing.

I unchecked it saved checked the images rechecked the box, and still it isn’t working.

I just launched this site (http://firststepweb.org) from the dev site and the fancybox worked fine there. I haven’t changed the style css. so this is the css:

/* fancybox */
#fancybox-loading{ position:fixed; top:50%; left:50%; height:40px; width:40px; margin-top:-20px; margin-left:-20px; cursor:pointer; overflow:hidden; z-index:1104; display:none}
* html #fancybox-loading{/* IE6 */
 position:absolute; margin-top:0}
#fancybox-loading div{ position:absolute; top:0; left:0; width:40px; height:480px; background-image:url('images/fancybox.png')}
#fancybox-overlay{ position:fixed; top:0; left:0; bottom:0; right:0; background:#000 url(images/light-mask.png) no-repeat 50% 10%; z-index:1100; display:none}
* html #fancybox-overlay{/* IE6 */
 position:absolute; width:100%}
#fancybox-tmp{ padding:0; margin:0; border:0; overflow:auto; display:none}
#fancybox-wrap{ position:absolute; top:0; left:0; margin:0; padding:20px; z-index:1101; display:none}
#fancybox-outer{ position:relative; width:100%; height:100%; background:#FFF}
#fancybox-inner{ position:absolute; top:0; left:0; width:1px; height:1px; padding:0; margin:0; outline:none; overflow:hidden}
#fancybox-hide-sel-frame{ position:absolute; top:0; left:0; width:100%; height:100%; background:transparent}
#fancybox-close{ position:absolute; top:-15px; right:-15px; width:30px; height:30px; background-image:url('images/fancybox.png'); background-position:-40px 0px; cursor:pointer; z-index:1103; display:none}
#fancybox_error{ color:#444; font:normal 12px/20px Arial; padding:7px; margin:0}
#fancybox-content{ height:auto; width:auto; padding:0; margin:0}
#fancybox-img{ width:100%; height:100%; padding:0; margin:0; border:none; outline:none; line-height:0; vertical-align:top; -ms-interpolation-mode:bicubic}
#fancybox-frame{ position:relative; width:100%; height:100%; border:none; display:block}
#fancybox-title{ position:absolute; bottom:0; left:0; font-family:Arial; font-size:12px; z-index:1102}
.fancybox-title-inside{ padding:10px 0; text-align:center; color:#333}
.fancybox-title-outside{ padding-top:5px; color:#FFF; text-align:center; font-weight:bold}
.fancybox-title-over{ color:#FFF; text-align:left}
#fancybox-title-over{ padding:10px;background-color:#333;background-color:rgba(0,0,0, 0.5); display:block}
#fancybox-title-wrap{ display:inline-block}
#fancybox-title-wrap span{ height:32px; float:left}

#fancybox-left,#fancybox-right{ position:absolute; bottom:0px; height:100%; width:35%; cursor:pointer; outline:none;
 z-index:1102; display:none}
#fancybox-left{ left:0px}
#fancybox-right{ right:0px}
#fancybox-left-ico,#fancybox-right-ico{ position:absolute; top:50%; left:-9999px; width:30px; height:30px; margin-top:-15px; cursor:pointer; z-index:1102; display:block}
#fancybox-left-ico{ background-image:url('images/fancybox.png'); background-position:-40px -30px}
#fancybox-right-ico{ background-image:url('images/fancybox.png'); background-position:-40px -60px}
#fancybox-left:hover,#fancybox-right:hover{ visibility:visible;/* IE6 */}
#fancybox-left:hover span{ left:20px}
#fancybox-right:hover span{ left:auto; right:20px}
.fancy-bg{ position:absolute; padding:0; margin:0; border:0; width:20px; height:20px; z-index:1001}

I have also deactivated all plugins, uploaded new images, built a new page with a new image.

I am at a loss. If anyone could help that would be fantastic. I really liked the look of the built in fancybox and I’d hate to have to go with a plugin.