Response title
This is preview!
jQuery Lightbox/Colorbox/Fancybox breaks jQuery image cross-fade. HALP!
in Using jQuery
•
10 years ago
O, hallo. :| Sorry to bother... I hope I'm posting this in the right place. There were a few areas that looked like likely places to put this, but I figured this was the most relevant.
I've tried all three of the above "boxes" and have the same issue with each. I currently have a page in which I'm using a jQuery image cross-fade slideshow. That works just fine on its own. On that page, I also have a menu along the top. I want the links to pop up in a box. I suppose you can call it inline content or an iframe? I don't really know which is more accurate.
In any case, as soon as I add the pop-up box code, the cross-fade function breaks. Instead of cycling through a series of images, they end up arrayed all together vertically, one after another. It's pretty poopy, but I was hoping someone could help me, please. Here is the markup I have right now, in which only the cross-fading slideshow is implemented:
You can see that I have all of the JavaScript, CSS and HTML bunched into one file. It's actually easier for me to have it all in one place until I have things functioning properly and then I can complicate things by cleaning it up. ;P
Anyway, once I add in the Lightbox/Colorbox/Fancybox script, that's when the trouble starts. Specifically, it's the line that calls "jquery-1.9.1.min.js" that seems to do it. I put the part that goes into the head section right before the </head> closing tag and the rest that goes into the body into the pertinent places. I can get it to work, to a point, if I don't call that one file. Then the box appears as a horizontal rectangle along the top of the viewport. Once I add in the reference to "jquery-1.9.1.min.js" (or any others; I've tried), that's when the whole layout goes completely awry.
Sorry to be so long-winded, but I hope I've explained everything clearly enough. Is there anyone who can help me get around this problem? Thanks in advance.
I've tried all three of the above "boxes" and have the same issue with each. I currently have a page in which I'm using a jQuery image cross-fade slideshow. That works just fine on its own. On that page, I also have a menu along the top. I want the links to pop up in a box. I suppose you can call it inline content or an iframe? I don't really know which is more accurate.
In any case, as soon as I add the pop-up box code, the cross-fade function breaks. Instead of cycling through a series of images, they end up arrayed all together vertically, one after another. It's pretty poopy, but I was hoping someone could help me, please. Here is the markup I have right now, in which only the cross-fading slideshow is implemented:
- <html>
<head>
<link href='http://fonts.googleapis.com/css?family=Amarante' rel='stylesheet' type='text/css'>
<title>Testing...</title>
<style type="text/css">
.slideshow { width: 578px; margin: auto }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#menu{
margin:0;
padding:0;
}
#menu ul{
padding:0;
margin:0;
z-index: 5;
text-align: center;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin:0;
padding:0;
z-index: 5;
}
#menu li a{
width: 150px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
color: #000000;
text-shadow:
-1px -1px 1px #ffe7a3,
1px -1px 1px #ffe7a3,
-1px 1px 1px #ffe7a3,
1px 1px 1px #ffe7a3;
-webkit-text-fill-color: #ffe7a3;
-webkit-text-stroke: 1px #ffe7a3;
}
#menu li a:hover{
color: #ffe7a3;
text-shadow:
-1px -1px 1px #000000,
1px -1px 1px #000000,
-1px 1px 1px #000000,
1px 1px 1px #000000;
-webkit-text-fill-color: #ffe7a3;
-webkit-text-stroke: 1px #000000;
}
#menu ul ul{
position: absolute;
top: 30px;
width: 100px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility: visible;
}
</style>
<style type="text/css">
.center {
width: 578px ;
margin-left: auto ;
margin-right: auto ;
}
</style>
</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" bgcolor="#000000">
<font face="Amarante, sans-serif" color="#99CCFF">
<table width="auto" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="menu">
<ul>
<li><a class='iframe' href="index.htm">NEWS</a>
</li>
<li><a class='iframe' href="#nogo">ABOUT</a>
<ul>
<li><a class='iframe' href="Mission.htm">Mission</a></li>
<li><a class='iframe' href="Story.htm">Story</a></li>
<li><a class='iframe' href="Characters.htm">Characters</a></li>
<li><a class='iframe' href="FAQs.htm">FAQs</a></li>
<li><a class='iframe' href="Credits.htm">Credits</a></li>
</ul>
</li>
<li><a class='iframe' href="#nogo">MEDIA</a>
<ul>
<li><a class='iframe' href="Gallery.htm">Gallery</a></li>
<li><a class='iframe' href="Videos.htm">Videos</a></li>
</ul>
</li>
<li><a class='iframe' href="#nogo">CONTRIBUTE</a>
<ul>
<li><a class='iframe' href="Donations.htm">Donations</a></li>
<li><a class='iframe' href="Casting.htm">Casting</a></li>
<li><a class='iframe' href="Crewing.htm">Crewing</a></li>
</ul>
</li>
<li><a class='iframe' href="Contact.htm">CONTACT</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
<div class="center" style="position:relative">
<img src="CQlogo.png" style="position:absolute; top:0px; left:0px; z-index:4"/>
</div>
<div class="slideshow center" style="position:relative; top:50px; z-index:0">
<img src="CQimg1.jpg" />
<img src="CQimg2.jpg" />
<img src="CQimg3.jpg" />
<img src="CQimg4.jpg" />
<img src="CQimg5.jpg" />
<img src="CQimg6.jpg" />
<img src="CQimg7.jpg" />
<img src="CQimg8.jpg" />
<img src="CQimg9.jpg" />
<img src="CQimg10.jpg" />
<img src="CQimg11.jpg" />
<img src="CQimg12.jpg" />
<img src="CQimg13.jpg" />
<img src="CQimg14.jpg" />
<img src="CQimg15.jpg" />
<img src="CQimg16.jpg" />
<img src="CQimg17.jpg" />
<img src="CQimg18.jpg" />
<img src="CQimg19.jpg" />
<img src="CQimg20.jpg" />
<img src="CQimg21.jpg" />
<img src="CQimg22.jpg" />
<img src="CQimg23.jpg" />
<img src="CQimg24.jpg" />
<img src="CQimg25.jpg" />
<img src="CQimg26.jpg" />
<img src="CQimg27.jpg" />
<img src="CQimg28.jpg" />
<img src="CQimg29.jpg" />
<img src="CQimg30.jpg" />
<img src="CQimg31.jpg" />
<img src="CQimg32.jpg" />
<img src="CQimg33.jpg" />
<img src="CQimg34.jpg" />
<img src="CQimg35.jpg" />
<img src="CQimg36.jpg" />
<img src="CQimg37.jpg" />
</div>
</body>
</html>
You can see that I have all of the JavaScript, CSS and HTML bunched into one file. It's actually easier for me to have it all in one place until I have things functioning properly and then I can complicate things by cleaning it up. ;P
Anyway, once I add in the Lightbox/Colorbox/Fancybox script, that's when the trouble starts. Specifically, it's the line that calls "jquery-1.9.1.min.js" that seems to do it. I put the part that goes into the head section right before the </head> closing tag and the rest that goes into the body into the pertinent places. I can get it to work, to a point, if I don't call that one file. Then the box appears as a horizontal rectangle along the top of the viewport. Once I add in the reference to "jquery-1.9.1.min.js" (or any others; I've tried), that's when the whole layout goes completely awry.
Sorry to be so long-winded, but I hope I've explained everything clearly enough. Is there anyone who can help me get around this problem? Thanks in advance.
1