PDA

View Full Version : 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/dynamicindex17/featuredcontentglider.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 (http://www.dynamicdrive.com/dynamicindex4/stepcarousel_suppliment3.htm), 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:


<!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:


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

should be:


<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):


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:


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:


<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
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.



.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.

Lady Rogue
08-06-2012, 02:43 PM
.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.
Sorry, I must have overlooked it. Thank you for pointing it out. I do have another question, is there anyway to make the scroll never ending? What I mean to say is, that it once it reaches the last image it starts over?I am trying to accomplish the same effect as the widget in the link I gave in the first post.:)

Lady Rogue
08-08-2012, 12:15 PM
Is there anyway to make the scroll never ending? What I mean to say is, that it once it reaches the last image it starts over?I am trying to accomplish the same effect as the widget in the link I gave in the first post.

GSimon
08-08-2012, 03:50 PM
http://www.dynamicdrive.com/dynamicindex14/reelslideshow.htm

Lady Rogue
08-08-2012, 06:37 PM
I appreciate the link, but it really doesn't help me. I don't have a clue how to merge that with the code I am already working with.

Lady Rogue
08-11-2012, 06:54 PM
http://www.escapebetweenthepages.com/glider/1.html

Is there anyway to make the scroll never ending? What I mean to say is, that it once it reaches the last image it starts over?I am trying to accomplish the same effect as the widget in the link I gave in the first post.

ddadmin
08-12-2012, 06:11 AM
Hmm there's no easy way to do this with Step Carousel script unfortunately. I have thought about modifying the script for such a behavior, though no ETA at the moment on that.

Lady Rogue
08-17-2012, 03:17 PM
Was hoping someone figured out a solution to my problem.

Lady Rogue
10-09-2012, 12:50 PM
Hi, I am back still wanting to figure this coding issue out. I was looking through the list for sliders and came across :: Continuous Reel Slideshow
http://www.dynamicdrive.com/dynamicindex14/reelslideshow.htm and I was wondering if perhaps this particular code would work for what I need and if someone could modify it so it would work simular to what I am wanting.