[solved] Custom JQuery Image Rotation?

michaywood · **Posted:** Tue Jul 27, 2010 7:58 pm

Hello CMSMSers!

I have been looking hard for a jquery image rotator and found this to be more what i'm after.

http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html

However.. I'm having the hardest time (since i'm a novice CMSMSer) getting that image rotator to work with the Gallery module.

I have installed the gallery module and uploaded 2 test images to the landingpage/ directory. I then created a custom template in the gallery module like so:

Template Source:

Code:

<div id="landing-header">
<div class="landing-wrap">
<div id="landing-slide-holder">
<div id="landing-slide-runner">
{foreach from=$images item=image}
   {if $image->isdir}
      <a href=""><img id="{$image->filename}" src="{$image->file}" alt="{$image->titlename}" class="slide" alt="" /></a>
   {/if}
{/foreach}
<div id="landing-slide-controls">
     <p id="landing-slide-desc" class="landing-text"></p>
     <p id="landing-slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Template CSS-Stylesheet

Code:

div.landing-wrap {
width : 970px;
margin : 0 auto 0 auto;
text-align : left;
}
div#landing-header {
margin : -1px 0 0;
}
div#landing-header div.landing-wrap {
height : 299px;
background : url(images/header-bg.png) no-repeat 50% 0;
}
div#landing-header div#landing-slide-holder {
z-index : 40;
width : 970px;
height : 390px;
position : absolute;
}
div#landing-header div#landing-slide-holder div#landing-slide-runner {
top : 9px;
left : 9px;
width : 970px;
height : 390px;
overflow : hidden;
position : absolute;
}
div#landing-header div#landingslide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#landing-header div#landing-slide-holder div#landing-slide-controls {
left : 0;
bottom : 228px;
width : 970px;
height : 46px;
display : none;
position : absolute;
background : url(images/slide-bg.png) 0 0;
}
div#landing-header div#landing-slide-holder div#landing-slide-controls p.landing-text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#landing-header div#landing-slide-holder div#landing-slide-controls p#landing-slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
div#landing-header div#landing-slide-holder div#landing-slide-controls p#landing-slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#landing-header div#landing-slide-holder div#landing-slide-controls p#landing-slide-nav a.on {
background-position : 0 -24px;
}
div#landing-header div#landing-slide-holder div#landing-slide-controls p#landing-slide-nav a {
background-image : url(images/silde-nav.png);
}

Template Javascript

Code:

<script type="text/javascript" src="modules/JQueryTools/lib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="modules/JQueryTools/lib/jquery.li-scroller.1.0.js"></script>
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

I don't want the text to display over the image saying a description, so i removed that piece of script.

I then put {Gallery dir="landingpage"} on my page and it just shows up with the box but no images or anything inside the box.

Does anyone have any ideas what i'm doing wrong in my template or gallery setup that might be messing up?

Thanks in advance!

Jos · **Posted:** Tue Jul 27, 2010 8:02 pm

look at the html sourcecode of your page and see if there are any other calls to jquery1.x.x.js

There should only be one call to the jquery script in your pages

uniqu3 · **Posted:** Wed Jul 28, 2010 6:55 am

Quote:

Red is your problem, twice jQuery.

michaywood · **Posted:** Wed Jul 28, 2010 1:00 pm

Ok, I removed the first call to 1.4.2.js and am only calling jquery.js now. Still nothing! It looks exactly the same (i attached a photo). My actual page template is

Code:

<body>
<div>{content}</div>
</body>

So it couldn't be anything in this template messing it up. Any ideas???

michaywood · **Posted:** Wed Jul 28, 2010 8:17 pm

Is there anything else in my code that looks weird? I have the li-scroller installed at the top of the page as a newsticker, so thats why the jquery was in there twice. I've removed it, still nothing working. Maybe there is something in my template code that isn't 100% right?

Dr.CSS · **Posted:** Wed Jul 28, 2010 8:40 pm

The main jQuery call has to be at the top of all others or it doesn't work...

michaywood · **Posted:** Thu Jul 29, 2010 1:38 pm

Ok,

I moved the main query to the top of the section but it still shows up the same as I showed in the previous post. Just the black box with no buttons on it or anything and no images showing up. When I look at the source code of the page, it isn't showing any of the images in the gallery folder I'm pulling from. Is there something in my template that seems to be wrong?

Jos · **Posted:** Thu Jul 29, 2010 4:34 pm

I must say you have chosen a rather difficult slidersystem, difficult to implement in a Gallery template that is... but not impossible

And... I'm in a happy mood and I created a GadgetinspirationSlider template out of it for you. ;D

You can download here and upload to your gallerytemplates.

michaywood · **Posted:** Thu Jul 29, 2010 6:24 pm

Thank you so much, Jos! That is extremely helpful!

Just for future knowledge, how would have YOU done it? I personally like the simple slider module cause you can make the images links in the CMSMS GUI and don't need to code anything, but i haven't a clue how to change the js for that. Is there another module you'd prefer that makes it easier for the end user?

Again.. THANK YOU!

Jos · **Posted:** Thu Jul 29, 2010 7:13 pm

I prefer Gallery

michaywood · **Posted:** Thu Jul 29, 2010 8:21 pm

wait.... i AM using the gallery module...

is there something i'm missing here?

or is gallery a .js you like to use?

Jos · **Posted:** Thu Jul 29, 2010 9:23 pm

I ment the CMSms Gallery module... of course

but you asked:

michaywood wrote:

Is there another module you'd prefer that makes it easier for the end user?

moonoo · **Posted:** Sat Aug 28, 2010 11:40 am

JOs, awesome template! thanks for spending the time to do this! loving this plugin! using it on most of the sites I build with the need for a Gallery and this template just makes it the more usefull for home page gallery display! fantastic work!

[solved] Custom JQuery Image Rotation?

Who is online