Converting the Featured Content Glider?

**Lady Rogue** · 07-30-2012, 01:37 PM

1) Script Title: Featured Content Glider

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

3) Describe problem: I don't necessarily have a problem it is more of a question of sort. I am wondering if there is a way to convert this particular code to function simular to a code I seen here: http://ebooks.com/ Specifically the scroller labeled "New York Times bestsellers " I really like the preview box on the side of the scroll and wondering it there was a code you would recommend or if we can do something with the Featured Content Glider code...

**ddadmin** · 07-30-2012, 11:42 PM

Looking at the script on that page, it's more of a carousel than glider actually, so it might be better to use a carousel script, then modify that one to conform to what you need (rather than the other way around). What that said, you might want to look at Step Carousel script, with the oninit() and onslide() event handlers invoked, to do what you want. Here is a full working example, with the code in red highlighting any additions from the default carousel script to accomplish the final result:

Code:

<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="stepcarousel.js">

/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 270px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<script type="text/javascript">

 var contentarray=new Array()  //Array storing the corresponding description for each Carousel panel
 contentarray[0]="A fruit a day keeps the doctor away! Some day I will visit one of these lovely caves!"
 contentarray[1]="Some day I will visit one of these lovely caves! Some day I will visit one of these lovely caves!"
 contentarray[2]="Nothing beats floating around in the pool when it's hot Some day I will visit one of these lovely caves!"
 contentarray[3]="Autumn, the season that just doesn't get no respect! Some day I will visit one of these lovely caves!"
 contentarray[4]="Life is like a box of chocolates Some day I will visit one of these lovely caves!"
 contentarray[5]="Life is like a box of coco puffs Life is like a box of coco puffs Life is like a box of coco puffs"

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'], //content setting ['inline'] or ['ajax', 'path_to_external_file']
	oninit:function(){
	 $contentcontainer=jQuery('#relatedcontent') //reference DIV used to contain related content
	 $posleft=$contentcontainer.position().left
	},
	onslide:function(){
	 //Update DIV with this panel's related content (notice imageA-1 as the array index, as imageA starts at 1, while array at 0
	 $contentcontainer.html(contentarray[statusA-1])
	 $contentcontainer.css({left:'100%'}).animate({left:0})
	}
})

</script>

<body>

<div style="width:300px; height:200px; float:left; font: normal 13px Verdana; margin-right: 50px; border:10px solid black; position:relative; overflow:hidden">
<div id="relatedcontent" style="position:relative; padding:10px"></div>
</div>

<div style="width: 500px; float:left">

<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>

<div class="panel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>

<div class="panel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>

<div class="panel">
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>

<div class="panel">
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</div>

</div>
</div>

</div>

**Lady Rogue** · 08-02-2012, 10:19 PM

It isn't a working code for me. It shows me two boxes with a scroll. I looked at the on set code and it is confusing the hell out of me.

**ddadmin** · 08-03-2012, 07:30 AM

The code I posted above as is should work (just tested it to confirm). Did you remember to download stepcarousel.js first and make sure the reference/path to it inside the code above is correct?

**Lady Rogue** · 08-04-2012, 02:41 AM

Could you please show me what I am doing wrong?

http://escapebetweenthepages.com/test/s.html

**jscheuer1** · 08-04-2012, 03:54 AM

This:

Code:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

should be:

Code:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

And there's a missing comma (added in red in the below):

Code:

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	 beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of  panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500,  wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav:  ['http://www.escapebetweenthepages.com/test/leftnav.gif', -5, 80], rightnav: ['http://www.escapebetweenthepages.com/test/rightnav.gif', -20, 80]},
	 statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start),  current panel (last), and total panels
	contenttype: ['inline'], //content setting ['inline'] or ['ajax',  'path_to_external_file']


	oninit:function(){
	 $contentcontainer=jQuery('#relatedcontent') //reference DIV used to contain related content
	 $posleft=$contentcontainer.position().left
	},
	onslide:function(){
	 //Update DIV with this panel's related content (notice imageA-1 as the array index, as imageA starts at 1, while array at 0
	 $contentcontainer.html(contentarray[statusA-1])
	 $contentcontainer.css({left:'100%'}).animate({left:0})
	}


})

There could also be other problems.

**Lady Rogue** · 08-04-2012, 06:33 PM

Ohh nice! So far so good.

http://www.escapebetweenthepages.com/glider/1.html

Thank you.

Now is there a way to to add an the image to the text in the left box?

and

Is there a way to move the images in the scroll in the second box closer together so that it has the same effect as the New York Times Bestseller widget found in the middle of the page?

**ddadmin** · 08-06-2012, 06:36 AM

To answer your questions:

1) Certainly. Just edit each element inside array contentarray[] to add the desired HTML to show, including images. For example:

Code:

var contentarray=new Array()  //Array storing the corresponding description for each Carousel panel
 contentarray[0]="A fruit a day keeps the doctor away! Some day I will visit one of these lovely caves! <img src="cave.gif' />"

Just remember by default to use single quotes instead of double quotes inside each element, or if you must use double quotes (such as for apostrophes), backspace them first (ie: I\'m the king of the world).

2) Just decrease the margin inside the description box:

Code:

<div style="width:300px; height:150px; float:left; font: normal 13px Verdana; margin-right: 50px; border:1px solid black; position:relative; overflow:hidden">
<div id="relatedcontent" style="position:relative; padding:2px"></div>
</div>

**Lady Rogue** · 08-06-2012, 12:26 PM

I got the image in the description box on the left, Thank you.

However, I didn't want to move the boxes themselves closer, I wanted to move the images inside the scroller closer together and have them still stop on the individual images So that each image will stop and have a description in the right box. I don't like the huge gaps between the images.

**GSimon** · 08-06-2012, 12:53 PM

Originally Posted by Lady Rogue

I got the image in the description box on the left, Thank you.

However, I didn't want to move the boxes themselves closer, I wanted to move the images inside the scroller closer together and have them still stop on the individual images So that each image will stop and have a description in the right box. I don't like the huge gaps between the images.

Code:

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

Seems pretty straightforward to me. They even wrote out the description telling you that this width = width of each panel.

Thread: Converting the Featured Content Glider?

Thread Tools

Search Thread

Converting the Featured Content Glider?

The Following User Says Thank You to GSimon For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions