how to define more class="toc" links in content slider

[redsky]

i'm using the content slider v2.4, thanks, i love it (image with 4 thumbs).

i want to increase the number of possible thumbs (up to 10) and can't figure out how to do this.

on the "Three ways to output the pagination interface- in detail" page:

"You may not always know in advanced how many contents are within your Slider, and hence not know how many class="toc" links to define. This is why you can in fact define more class="toc" links than there are contents, and the script will automatically hide the excess ones come initiliazation. So define 10 class="toc" links just to be sure for example, even though you don't anticipate having more than 4 or 5 contents within your Slider most of the time."

Can you please be more specific??? Or someone reading this know how I do this??

THANKS

[jscheuer1]

This:

You may not always know in advanced how many contents are within your Slider, and hence not know how many class="toc" links to define. This is why you can in fact define more class="toc" links than there are contents, and the script will automatically hide the excess ones come initiliazation. So define 10 class="toc" links just to be sure for example, even though you don't anticipate having more than 4 or 5 contents within your Slider most of the time.

means what it says. Make more 'toc' links than you need, the extra ones will be ignored.

But, reading between the lines, you could also simply make exactly the number of 'toc' links that you need. That's assuming you know how many you need. If you do, then it becomes a simple matter to make them have whatever characteristics/appearance you like.

One of at least several possible ways:

<div id="paginate-slider2" class="pagination">
<a href="#" class="toc">First Page</a> 
<a href="#" class="toc">Second Page</a> 
<a href="#" class="toc">Third Page</a> 
<a href="#" class="toc">Fourth Page</a> 
<a href="#" class="toc">Fifth Page</a> 
<a href="#" class="toc">Sixth Page</a> 
<a href="#" class="toc">Seventh Page</a> 
<a href="#" class="toc">Eighth Page</a> 
<a href="#" class="toc">Ninth Page</a> 
<a href="#" class="toc">Tenth Page</a> 
</div>

[redsky]

thanks john,
that was pretty darn simple. i found the instructions unclear for this.

also, in the code, the <class="toc"> is different for each link, which adds to the confusion. ie. <class="toc"> for one link, next link is <class="toc someclass">, next link is <class="toc someotheclass">.

from what you wrote, cannot each link simply be <class="toc">???

another question I have is in the DIV tags for the bg images:
it calls for <style="background: url (...pretty.img)>
1. when i'm making the page, i'm providing the img location on my hard drive. will this be a problem later when I upload?
2. either way, is there a simple way to 'get' the image-- insert image command obviously does the <img src:..> which i assume is NOT what you want for a bg image. any shortcut way to get the url image into the code??

again, thanks for your prompt reply. I can't tell you what appreciation I now have for what it takes to learn css, js, the works! I am just skimming the surface enough to get by.

[jscheuer1]

Elements may have more than one class. The class or classes that an element has are usually only for styling. The demo page was meant to convey that you could also have other classes for styling (really for whatever other) purposes you might need or want them for. All that's required for the link to be a toc though is that it have the toc class and be in the paginate division for that slider.

As to your other question, that looks like ordinary HTML/css. If so, it will behave the same way. Background or any other images must be on the server to work live. Except if you test your page live and it references images on your hard drive, well they are still on your hard drive, so they may show up for you, just not for anyone else.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[redsky]

okay, that explained that well, thanks.

so with the url bg image, i could just as easily insert img src?? if yes, that would be much easier/faster for me.

right now, i'm testing live, not on server yet.

sincere thanks for your help. this site i've done totally on my own from ignorance (is bliss) to my present state of enlightenment...

[jscheuer1]

Well, when you use:

style="background: url (...pretty.img)"

as an attribute for an element, that won't do anything because ... isn't a valid path. If it is a valid path and the image is there, it will be the background image for that element, assuming that element supports having a background image, that element is large enough so one can see its background, and that element's background isn't completely covered by anything else/other things. You could substitute an image tag for that element and make its src attribute be to any valid image. But then the image would no longer be background, and to have anything appear over it would require positioning, top and left styles, possibly also z-index style for either it and/or the element you wish to appear to partially cover it.

[redsky]

Hi John,
Yes, I only put the ... in my post as that is how the code shows on the tutorial.

That is one of my questions-- is there a quick way to insert the URL path into the code (from DW)?

Right now, I am going to the insert image, finding the image, copying the path (which is on my hard drive-- thus relating to my earlier question if THAT path will update when I move the image to my web server).

Seems like there should be a shortcut, but I haven't found the answer to that on my websearch, i.e. specifically, how to insert a selected image (in DW) into the background:url('../Images/pretty.jpg') of a DIV tag, in this case the bg image for the content slider.

And thank you, you did answer the question, it needs to remain as such [background:url('../Images/pretty.jpg'] and cannot be img src:

thanks again for your timely answers. i am pretty much all done with my page setup to use like a template for my site. it works really well. just wondering if i can find a big time shortcut on getting that bg image.

fyi, i did find a similar effect on another web site (and saw the dynamic drive in the code!!), but she added the capability to click on the image and a flash (almost like slimbox) enlargement pops-up.

anyway, thank you, j

[jscheuer1]

I see what you're saying. Many WYSIWYG editors like DW provide a challenge to developers when configuring paths to images regarless if they are background images or actual images. The tendency of these programs is often to only allow absolute paths. When you are designing locally, that would be a path on the hard drive. I'm not sure if there is an easy way to override that. There may be. I haven't used any of them for many years.

There are other folks here that use DW though. You could ask about it in the css or HTML sections. If you do, make it clear that you know what path to use, just not an easy way to get DW select that path for you. That is if that is the problem.

As to combining the Slider with other scripts, that's fairly easy because the content for the slider is real HTML, ex:

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here.
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

If you have events or attributes you want to add in there so that another script gets triggered when the larger images or whatever in there are clicked, it's fairly easy to do, just put the required HTML in there. Now the specific script used by that other site, I don't know what it is, or how they did it. But if you give me a link to the page where they are using it I can probably find out. If it's a free script we can probably get it set up for you as well. There is a free script called lightbox++ (among at least a few others, and perhaps not the best choice) that might work for what you are describing.

[redsky]

hi john, good suggestion on posting my url question on another forum.

in the meantime, yes, i did notice several of the websites use lightbox, and thank you! i am so happy to hear this can be done along with content slider. it will certainly add to the product browsing. if there is a better product than lightbox, i would be interested in hearing about it.

this is link to my mock-up product page-- basic format is there, just not all the links yet for obvious reasons. http://www.redskyjewelry.com/Templat.../3_detail.html. ??I think the crossover fade may be too long?

here is a link to a site with what I was referring to -- http://www.shiana.com/Shop/Control/P...ds_per_page/96.
I noticed that whether you click on the smaller or larger image, the 'lightbox' opens.

anyway, i think the content slider came out great! thank you for whatever you can help with in getting me jumpstarted on this!
--j

[redsky]

i'm stuck on getting it right with this (being able to click on image in content slider to enlarge it). I found the lightbox image viewer on this site and thought this might work.

as john's suggestion to put link between content image, this is what I have (below). no image pops up. the 'threaders' text is over the large bg image on the left. I have the proper paths for the js and css files. i know i've got it screwed up somehow.

[<div class="contentdiv" style="background: url(../product_bracelets/2008_450xthumbs_bracelets/001b_brown-2.jpg) center left no-repeat">
<a href="../product_collections/3_images_5x4_med/anna_threader_all" rel="lightbox" title="threaders">threaders</a>
</div>]