Help: Featured Content Slider v2.4

[logiclab]

1) Script Title:
Featured Content Slider v2.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem:
VERSION 4: I would like to use the script on a page I am designing. I am not a programmer however I have been able to get the necessary code into a rudimentary mockup page.

http://www.beverlyhillspeople.com/pa...don/index.html

The script has a vertical orientation and I would like it to be horizontal as in the photoshop mockup page at. . .

http://www.beverlyhillspeople.com/langdon2.jpg

This is a photography website/gallery with mostly portrait orientation.

The thumbnails on the left will be ~100 x 370

Any help would be appreciated.

Thanks folks,

logiclab

[jscheuer1]

The way you have things setup, these are your "pagination" links:

<div id="paginate-slider4">
    <!--  is this necessary?  <a href="#" class="toc" style="margin-left: 0px">
-->
    <a href="#" class="toc" style="margin-left: 0px"><img src="frankt.jpg" /></a></a> <a href="#" class="toc someclass"> <img src="pine_thumb.jpg" /></a> <a href="#" class="toc someotheclass"><img src="ocean_thumb.jpg" /></a> <a href="#" class="toc someotheclass"><img src="sushi2_thumb.jpg" /></a></div>

Where you place them in your layout is up to you. The easiest way to get them to line up all in a row with the display of the result also in that row is to use a table. A better method is to use floats. There might be others.

However it's done, it's just a matter of layout, having nothing to do with this particular script. Example using a table:

<table>
<tr>
<td>  <div id="paginate-slider4">
    <a href="#" class="toc" style="margin-left: 0px"><img src="frankt.jpg" /></a></a> <a href="#" class="toc someclass"> <img src="pine_thumb.jpg" /></a> <a href="#" class="toc someotheclass"><img src="ocean_thumb.jpg" /></a> <a href="#" class="toc someotheclass"><img src="sushi2_thumb.jpg" /></a></div></td>
<td>  <div id="slider4" class="sliderwrapper">
    <div class="contentdiv" style="background: url(frank.jpg) center left no-repeat"> </div>

    <div class="contentdiv" style="background: url(pine.jpg) center left no-repeat"> </div>
    <div class="contentdiv" style="background: url(ocean.jpg) center left no-repeat"> </div>
    <div class="contentdiv" style="background: url(sushi2.jpg) center left no-repeat"> </div>
  </div>
</td>
</tr>
</table>
<script type="text/javascript"> 
 
featuredcontentslider.init({
	id: "slider4",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.1],  //[true/false, fadedegree]
	autorotate: [true, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})
 
</script>

[logiclab]

Thanks John,

I have got a layout here. . .

http://www.beverlyhillspeople.com/pa...on2/index.html

I am using css but maybe a table would be better for the 6 pics, 5 previews on the left and 1 full pic on the right.

I am unclear about the naming. . .

class="toc" style="margin-left: 0px">
class="toc someclass">
class="toc someotheclass">
class="toc someotheclass">

what gives?

I still haven't got the code in place yet.

logiclab

[jscheuer1]

I'm not sure what you mean about "I am using css but maybe a table would be better", your layout on the page linked to in your post immediately preceding this post does (at this typing) use a table. Any valid layout that looks like you want it to and works with the script is fine, as long as the 'toc' links are in the pagination division. So, going by what you have:

  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>

      <td>4</td>
      <td>5</td>
      <td>pic display</td>
    </tr>
  </table>

You'd need:

<div id="paginate-slider4">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>

      <td>4</td>
      <td>5</td>
      <td>pic display</td>
    </tr>
  </table>
</div>

But there might be a problem including the display in the pagination div, so (basically what I had in my previous post):

  <table>
    <tr>
      <td><div id="paginate-slider4">12345</div></td>
      <td>pic display</td>
    </tr>
  </table>

would be better.

As for this bit:

class="toc" style="margin-left: 0px">
class="toc someclass"> 
class="toc someotheclass">
class="toc someotheclass">

all that's required is:

class="toc">
class="toc"> 
class="toc">
class="toc">

The rest is optional, for use in styling those links if you so desire. Oh yeah, they must be links, something your code snippet doesn't show one way or the other.

[logiclab]

I am sorry. I failed to mention that I have isolated this on a separate page that sort of works. When you initially load the script, it advances on its own and this is where it gets wonky. With Chrome, the full pic is bouncing to the bottom of the page and firefox just doesn't display the full pic. I am afraid to look at it in IE.

http://www.beverlyhillspeople.com/pa.../testnav1.html

I also have some problems validating the CSS. I don't understand the feedback. . . as follows.

23 .sliderwrapper .contentdiv attempt to find a semi-colon before the property name. add it

23 .sliderwrapper .contentdiv Property progid doesn't exist : DXImageTransform DXImageTransform

23 .sliderwrapper .contentdiv Parse Error DXImageTransform.Microsoft.alpha(opacity=100);

24 Parse Error [: 1; opacity: 1; } /*.pagination { width: 412px; /*Width of pagination DIV. Total width should equal slider's outer width (400+6+6=412)text-align: right; background-color: navy; padding: 5px 10px; } .pagination a { padding: 0 5px; text-decoration: none; color: #00007D; background: white; } .pagination a:hover, .pagination a.selected { color: #000; background-color: #FEE496; } */]

Thanks so much John. I will work on this and hopefully get it working.

logiclab

[logiclab]

I have got it pretty close. Only one problem left. When the script is running in automatic mode, it looses the fade after the second pic

[jscheuer1]

Change this in your css file:

/*position: absolute; leave as is*/

to:

position: absolute; /*leave as is*/

[logiclab]

YES!

Everything works. Thank you a million times. I really appreciate your help.

logiclab