I'm hoping someone can help me with a jQuery carousel (jQueryMyCarousel http://www.enova-tech.net/eng/lab/jmycarousel/3). Let me start with I'm somewhat of a noob with JS. Now to add to things, I'm trying to add this carousel to an existing page where I already have a working jQuery tab UI, but for some reason I can't get the carousel to work. To add to it, I'm working within a CMS that I don't have a ton of control over (and I know they have errors within their markup that I can't control) so I've had to reference the jQuery JS and CSS a bit differently, which worked fine for my tabs, but the carousel still doesn't want to come to together (I can't get the images to show in a horizontal fashion like they are supposed to and the left/ right arrows don't show). Can someone PLEASE help me? Here's my code:
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$("#tabs").tabs();
$('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" mce_href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />').appendTo($('head'));
});
// ]]></script>
<script src="JMyCarousel.js" type="text/javascript">// <![CDATA[
$(function() {
$(".JMyCarousel").jMyCarousel({
visible: '100%',
eltByElt: true
});
});
$('<link href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" mce_href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" rel="stylesheet" type="text/css" />').appendTo($('head'));
});
// ]]></script>
<span class="pageCenterTitle">Welcome to Missouri German Shepherd Rescue!</span> <strong>Check out some of our special featured dogs:</strong>
<table style="width: 715px; height: 100%;" border="0" cellpadding="5">
<tbody>
<tr>
<td rowspan="3" width="559">
<table style="width: 100%; height: 100%;" border="0" cellpadding="5">
<tbody>
<tr>
<td width="545">
<div id="tabs" style="width: 500px;">
<ul>
<li><a href="#fragment-1">DeeDee</a></li>
<li><a href="#fragment-2">Missy</a></li>
<li><a href="#fragment-3">Sampson</a></li>
<li><a href="#fragment-4">Roco</a></li>
</ul>
<div id="fragment-1">
<h2>DeeDee</h2>
<table style="width: 100%;" border="0" cellpadding="5">
<tbody>
<tr>
<td width="80%" height="100%" valign="top">
<p><strong>Female | approx. 1 year 4 months<a href="/animals/detail?AnimalID=3164913"><img style="border: 0pt none;" title="DeeDee" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nutsflscqao.jpg" alt="DeeDee" hspace="5" vspace="5" width="165" height="216" align="right" /></a><br /><br /> </strong>Poetry in motion!</p>
<p>DeeDee is an absolutely beautiful sleek black girl with lots of energy to burn! She'd be a great dog for an active family who is willing to give her the love, attention, discipline and daily exercise she needs. <a href="/animals/detail?AnimalID=3164913">Learn More About DeeDee</a></p>
<table style="width: 206px; height: 62px;" border="0" cellpadding="2">
<tbody>
<tr>
<td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&FormID=1410&ContactsFormsID="><span>Adoption Application</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
</div>
<div id="fragment-2">
<h2>Missy</h2>
<table style="width: 100%;" border="0" cellpadding="5">
<tbody>
<tr>
<td width="80%" height="100%" valign="top">
<p><strong>Female | approx. 6 year 2 months<a href="animals/detail?AnimalID=3136834"><img style="border: 0pt none;" title="Missy" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbqnubuw20m.jpg" alt="Missy" hspace="5" vspace="5" width="165" height="216" align="right" /></a><br /><br /> </strong>Complete sweetheart!</p>
<p>Missy is such a sweet girl who was fortunate enough to avoid a tragic end. She is calm, loving and very well behaved. Missy is a complete lovebug who simply wants to snuggle with you.<a href="/animals/detail?AnimalID=3136834">Learn More About Missy</a></p>
<table style="width: 206px; height: 62px;" border="0" cellpadding="2">
<tbody>
<tr>
<td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&FormID=1410&ContactsFormsID="><span>Adoption Application</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
</div>
<div id="fragment-3">
<h2>Sampson</h2>
<table style="width: 100%; height: 100%;" border="0" cellpadding="5">
<tbody>
<tr>
<td width="80%" height="100%" valign="top">
<p><strong>Male | approx. 4-5 years<a href="/animals/detail?AnimalID=2950199"><img style="border: 0pt none;" title="Sampson" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nagekpw1vin.jpg" alt="Sampson" hspace="5" vspace="5" width="142" height="215" align="right" /></a></strong></p>
<p>Big, stunning bi-color boy who thinks he's a puppy!</p>
<p><strong>SAMPSON</strong> was also dumped by a puppy mill and had spent his entire life confined to a tiny crate 24/7. He's a stunning bi-color GSD, and a wonderfully sweet fellow who's learned that life is good for a change. He LOVES running around in the play yard, likes soft stuffed toys (jumps and twirls in the air with them) and loves his walks, playtime, attention, the sun, the fresh air. With a little patience and training, he'll be a WOW!-ser of a companion! <a href="/animals/detail?AnimalID=2950199">Learn More About Sampson</a></p>
<table style="width: 207px; height: 62px;" border="0" cellpadding="2">
<tbody>
<tr>
<td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&FormID=1410&ContactsFormsID="><span>Adoption Application</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
</div>
<div id="fragment-4">
<h2>Roco</h2>
<table style="width: 100%;" border="0" cellpadding="2">
<tbody>
<tr>
<td width="100%" height="100%" valign="top">
<p><strong>Male | approx. 4 years</strong><a href="/animals/detail?AnimalID=2875674"><img style="border: 0pt none;" title="Roco" src="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nvoaek3ewjl.jpg" alt="Roco" hspace="5" vspace="5" width="164" height="215" align="right" /></a></p>
<p>A classic beauty and a serious GSD!</p>
<p><strong>ROCO </strong>is a classic black and tan GSD with amazing potential! He'd love an active owner who is willing to give him the love, attention, discipline and daily exercise he needs. Roco is a serious dog and needs an experienced owner. He's adores men (a true man's dog) and gets along with women who are strong leaders. He gets along with many other dogs, especially females and submissive dogs. <a href="/animals/detail?AnimalID=1765783">Learn More About Roco</a></p>
<table style="width: 204px; height: 62px;" border="0" cellpadding="2">
<tbody>
<tr>
<td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&FormID=1410&ContactsFormsID="><span>Adoption Application</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td width="130" align="center" valign="top">
<p><strong>Other Ways To Help:</strong></p>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table style="width: 100%;" border="0" cellpadding="2">
<tbody>
<tr>
<td valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/info/donate"><span>Donate</span></a> <br /><br /></td>
</tr>
<tr>
<td valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/user/login?refererPageID=72&keyID=1411&referer=/forms/form_edit.phpQu8FormID=1411"><span>Foster</span></a><br /><br /></td>
</tr>
<tr>
<td valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/user/login?refererPageID=72&keyID=1413&referer=/forms/form_edit.phpQu8FormID=1413"><span>Volunteer</span></a> <br /><br /></td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td align="center" valign="top"> </td>
</tr>
<tr>
<td colspan="2">
<table style="width: 100%;" border="0" cellpadding="10">
<tbody>
<tr>
<td style="background-repeat: no-repeat;" colspan="2" align="center" valign="top" background="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nkl7yepcvoi.gif">
<p><span style="color: #000000;"><strong> Our Favorite Success Stories!</strong></span></p>
<div class="JMyCarousel" style="overflow: hidden; position: relative; z-index: 2; left: 0px; width: 90%; height: 175px;"><input class="next" style="opacity: 0.6; z-index: 200; position: absolute; right: 0px; top: 30px;" type="button" /> <input class="prev" style="opacity: 0.6; z-index: 200; position: absolute; left: 0px; top: 30px;" type="Button" />
<ul style="overflow: hidden; float: left; display: inline;">
<a class="thickbox" style="overflow: hidden; float: left;" title="Pete Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nucm5y5yiz9.jpg" alt="" width="200" height="150" /></a>
<li style="overflow: hidden; float: left; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Ralph (previously Taylor) With His New Family" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njvjhdrkdgj.jpg" alt="" width="200" height="150" /></a></li>
<li style="overflow: hidden; float: left; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Roz Getting Ready For A Car Ride" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nsos6uemx0d.jpg" alt="" width="200" height="150" /></a></li>
<li style="overflow: hidden; float: left; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Sid (aka Zed) Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbamtbhmn5m.jpg" alt="" width="200" height="150" /></a></li>
<li style="overflow: hidden; float: left; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Pete and Sid Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njhkiyyv9gx.jpg" alt="" width="200" height="150" /></a></li>
</ul>
</div>
<h3><span style="font-size: 10pt;"><a href="http://mogsrescue.rescuegroups.org/animals/stories">Read all of our success stories now!</a></span></h3>
</td>
</tr>
<tr>
<td style="background-repeat: no-repeat;" width="50%" valign="top" background="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152n9dsekpcbtx.gif">
<p><span style="color: #000000;"><strong>The MOGS Team In Action!</strong></span></p>
<p><span style="font-size: 10pt;"><span style="color: #000000;">Sure a good amount of our time is<br />devoted to rescuing and rehoming <br />these fantastic dogs. But it doesn't <br />stop there!</span></span> <a href="/info/display?PageID=10303"><span style="font-size: 10pt;">Read More</span></a><span style="font-size: 10pt;"><br /> <br /> </span></p>
</td>
<td style="background-repeat: no-repeat;" width="50%" background="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nprimq50hbh.gif">
<p><span style="color: #000000;"><strong>Is a German Shepherd Right For you?</strong><br /><br /><span style="font-size: 10pt;">A German Shepherd can make<br />a great family addition. But <br />before you bring one in your<br />home, be sure it's the right dog <br />for you.</span></span><span style="font-size: 10pt;"> <a href="http://mogsrescue.rescuegroups.org/info/display?PageID=9955&popup=Yes">Read More</a></span></p>
<p> </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div>{SaD300x160d/}</div>
Thanks I updated that, but it still doesn't seem to load my images in 1 line horizontally... It seems like it's really close, but loads my 4 images as more of a 2x2 grid vs. 1x4 if that makes any sense? Any other thoughts?
The previous syntax error probably prevented the css file from loading.
If this doesn't fully resolve, then I notice you have applied style attributes including float:left, overflow:hidden etc. These may not be required as the carousel css and JS may be sufficient. I would temporarily remove these style attributes and then, perhaps, add them back in bit by bit.
I'm thinking it has something to do with referencing the actual jMyQuery.JS file... but here's my problem, I only have one generic "files" tool within the CMS that I can access... which doesn't work to reference. Is there another way? Shouldn't I be able to reference the .JS file from Enova's site, much like I did the CSS? i.e.
Well I did, but I must have reverted back to an old version of it when I was messing with it... I've put in the reference to the JS file.... and removed the float: left attributes...
Now at least they are in a linear fashion, but how do I limit them to the constraints of the carousel so they aren't breaking my page (i.e. in FireFox especially)?
Sorry for being so dense, I REALLY appreciate your help!
When I look at your page the width of the carousel div and its contained ul is huge (2448px). Try changing the width of the div from 75% to a pixel size (500px ?).
Added: Yeah, 500px looks good
and you have two next and prev buttons - best to have one of each.
Last edited by AndrewGSW; 04-24-2011 at 12:52 AM..
Reason: Works
It works if I amend it on the client-side by setting the width of the div to 500px - see attachment.
Is the width okay if you disable the carousel js and css? In which case it's the carousel which is changing your styles.
If not, then there must be (?) something else over-writing your width setting.
Thanks, sorry had to hop off line... if I disable the CSS/ JS my carousel goes back to displaying as a list (single column) vs. horizontal. I think you're right that there is another width/ style conflicting though...
It's weird, because I update the width, then save the page via the CMS, but when I look at the code client side, my width change doesn't seem to be there (i.e. it's still at 100% even though I changed it to 500px). Even when I go back in an edit the page via the CMS it says 500px, but anytime I look at it client side, say in Firebug it says 100%. If I change it client side to 500px it works.
I just can't figure out what's conflicting with it....
Last edited by AChicken9; 04-24-2011 at 04:19 PM..
It would be best to ensure that your pages are all saved (and uploaded) as the most recent versions. Hopefully in your CMS there is a magic button to 'Update All Pages'. Perhaps add a comment (or something..) to the page or css and check that it's present on the client-side.
It's best to do this first, otherwise you might spend a lot of time looking for an issue that isn't there
Before you post, read our: 
