Jump to content
Stef's Coding Community

jQuery Coda slider with images


Recommended Posts

I am trying to get a coda slida to work with 10 images instead of tabs and am having a lot of difficulty. I am an idiot when it come to developping, having taken 3 courses in PHP and flunking them all, so JS is like trying to understand Chinese to me.

 

I have used 2 modifications of the same and can't get either to work.

First I tried this one http://tenerifeb'>http://tenerifeb usinessinformation.com/sliders/trial.html

based on the original Coda Slida

http://www.ndoherty.biz/demos/coda-slider/1.1.1/

But as the ul tags are generated by the js file, I have no idea how to get them onto 2 lines instead of spreading across the page.

 

This one http://tenerifeb usinessinformation.com/sliders/trial2.html

is based on this demo

http://css-tricks.com/examples/FeaturedContentSlider/

and while I managed to get the thumb images in place, I cannot get them to line up.

 

Any help on either of both of these would be most welcome and greatly appreciated.

Link to post
Share on other sites

I'll start with the first one...

 

But as the ul tags are generated by the js file, I have no idea how to get them onto 2 lines instead of spreading across the page.

Well, that's a CSS issue, and has nothing to do with Javascript. If I understand you correctly, you want the "tabs" that form the navigation (they currently say "undefined") to go down the page, rather than across?

 

You just need to change the CSS. Remove "float:left" from .stripNav ul li (main.css line 148 or so)

Link to post
Share on other sites

The easiest way to understand how the code works is to view the source after the browser has rendered it (or via Firebug.)

 

For five thumbnails across the page:

 

-- add "padding-left:45px" to .stripNav ul (main.css, line 144)

-- use "width:800px" on .slider-wrapper (main.css, line 99)

-- remove the "style="width: 1420px;"" from #stripNav0 (trial.html)

Link to post
Share on other sites

Hello, a little bit down the page they talk about the tabs here... http://www.ndoherty.biz/2007/10/coda-slider-11/

 

So, you'll probably need to duplicate your second ul (in the JS) and then just target it in your css - tricky! I would keep looking for a slider with the ul in the HTML though to make things easier.

Link to post
Share on other sites

Thanks for your input, it is too late at night in Europe for me to work on it now.

 

Ben, I can get the 5 thumnails across the page, no problem, I just can't get the second row underneath. There are no ul li tags in the rendered html source code and it does mention in the css file that the ul is dynamically generated and there are changes to be made in the js file if there are modifications to stripNav.

 

Eric, that's the second option I mentioned,

http://tenerifeb usinessinformation.com/sliders/trial2.html

is based on this demo

http://css-tricks.com/examples/FeaturedContentSlider/

I can get the second row of thumbnails but I can't get them ligned up with the active tag.

 

Anyway I have been looking at it for too long (brain overload) and need to decant the whole thing with a little sleep, and maybe I'll find the solution ( or you will!!) tomorrow.

Edited by virtual
Link to post
Share on other sites
Thank you for your input, I'm almost there.

 

Ben, can you tell me how to stop the automatic play on trial2, I'm sure that is in the JS.

 

I'm not exactly sure... You might need to go back to the original place where you downloaded it, and see if they have any comments on that. You may try removing this from the JS, but I'm not completely sure if this will break something else.

 

(ignore the line numbers)

 

theInterval = function(cur){
8 clearInterval(theInt);
9
10 if( typeof cur != 'undefined' )
11 curclicked = cur;
12
13 $crosslink.removeClass("active-thumb");
14 $navthumb.eq(curclicked).parent().addClass("active-thumb");
15 $(".stripNav ul li a").eq(curclicked).trigger('click');
16
17 theInt = setInterval(function(){
18 $crosslink.removeClass("active-thumb");
19 $navthumb.eq(curclicked).parent().addClass("active-thumb");
20 $(".stripNav ul li a").eq(curclicked).trigger('click');
21 curclicked++;
22 if( 6 == curclicked )
23 curclicked = 0;
24
25 }, 3000);
26 }; 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...