Featured Content Glider Help

**nemetzger** · 01-05-2010, 10:19 AM

1) Script Title: Featured Content Glider

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

3) Describe problem:

On this page: http://logomasterpiece.com/portfolio/

I am trying to set up my online portfolio using the above script. If I specify 3 pieces of content, it glides fine. But, if I add a 4th one, it will only scroll through two pieces of content. Eventually, I will need to be able to specify an unlimited number of content to scroll through using this script.

Does anyone know why adding the fourth content corrupts the script? Is there someplace I need to specify how many pieces of content there is? By the end of the week I would like to have my entire portfolio done and be able to add to it seamlessly.

Here is my code for reference:

Code:

<script type="text/javascript">

featuredcontentglider.init({
	gliderid: "portfoliothumbs", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 900, //Glide animation duration (in milliseconds)
	direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: true, //Auto rotate contents (true/false)?
	autorotateconfig: [20000, 0] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<div id="p-select" class="glidecontenttoggler">
<div class="prev">
<a href="#" class="prev"><img src="images/portfolioleftarrow.gif" border="0"></a> 
</div>

<div id="portfoliothumbs" class="glidecontentwrapper">

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/1.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/2.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/3.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/4.png">
</div>

</div>

<div class="next">
<a href="#" class="next"><img src="images/portfoliorightarrow.gif" border="0"></a>
</div>

</div>

Please help!

Ne'

**ddadmin** · 01-05-2010, 10:26 AM

Looking at the code you posted I don't see anything wrong. Do you have a link to the problem page we can check out?

**nemetzger** · 01-05-2010, 07:46 PM

I posted it above, but here it is again:
http://logomasterpiece.com/portfolio/

**jscheuer1** · 01-06-2010, 10:00 AM

I'm not sure what the problem is though I see it and it's strange. But in some browsers there's another issue. It is preventing the entire page from being displayed. Also, I believe you have this situation on other pages as well. You have an unclosed comment in the style section:

Code:

<style type="text/css">
<!--
body {
background-image: url(images/elements/lmp09bkgsagestr.png); background-repeat:repeat-x;
height:100%;
background-color: #E0EAC5;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

 . . .

#footer
{position:relative;
top: 10px;
width: 930px;
margin-left: auto;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
font-weight: bold;
color:#62635F;
text-align:center;
height: 40px;
line-height: 40px;
}

</style>

At the end there, you need:

Code:

font-weight: bold;
color:#62635F;
text-align:center;
height: 40px;
line-height: 40px;
}
-->
</style>

**jscheuer1** · 01-06-2010, 01:44 PM

IMPORTANT: Don't miss my unrelated but perhaps more important observation in my previous post. Without it, your pages will go unseen in many browsers.

OK, I figured this one out. Get rid of the redundant prev and next classed divisions:

Code:

<div id="p-select" class="glidecontenttoggler">
<div class="prev">
<a href="#" class="prev"><img src="images/portfolioleftarrow.gif" border="0"></a> 
</div>

<div id="portfoliothumbs" class="glidecontentwrapper">

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/1.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/2.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/3.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/4.png">
</div>

</div>

<div class="next">
<a href="#" class="next"><img src="images/portfoliorightarrow.gif" border="0"></a>
</div>


</div>

So that you are left with:

Code:

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev"><img src="images/portfolioleftarrow.gif" border="0"></a> 

<div id="portfoliothumbs" class="glidecontentwrapper">

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/1.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/2.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/3.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/4.png">
</div>

</div>

<a href="#" class="next"><img src="images/portfoliorightarrow.gif" border="0"></a>
</div>

**nemetzger** · 01-07-2010, 05:01 AM

Thank you so much for your help! I have fixed the error you pointed out. For the content glider code, I took your suggestion on how to fix it with just a minor difference. I left the div tags, because it is needed for the layout. But, it was the redundancy of having the same class defined in the div tag and the link tag. Here is my final code.

Code:

<script type="text/javascript">

featuredcontentglider.init({
	gliderid: "portfoliothumbs", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 900, //Glide animation duration (in milliseconds)
	direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: true, //Auto rotate contents (true/false)?
	autorotateconfig: [20000, 0] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<div id="p-select" class="glidecontenttoggler">

<div>
<a href="#" class="prev"><img src="images/portfolioleftarrow.gif" border="0"></a> 
</div>

<div id="portfoliothumbs" class="glidecontentwrapper">

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/1.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/2.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/3.png">
</div>

<div class="glidecontent">
<img src="portfolio/portfoliothumbs/4.png">
</div>

</div>

<div>
<a href="#" class="next"><img src="images/portfoliorightarrow.gif" border="0"></a>
</div>

</div>

Fixed Page:
http://logomasterpiece.com/portfolio/

Thanks! Ne'

**jscheuer1** · 01-07-2010, 06:30 AM

That will work. In testing here in several browsers it was fine without those divisions. But it's possible that some browser I didn't test in might require the div tags. It also could be done with the divisions, but without the a tags. You would then probably want to add to the styles:

Code:

.prev, .next {
          cursor: pointer;
}

Glad it worked out.

**nemetzger** · 01-07-2010, 07:52 PM

Originally Posted by jscheuer1

That will work. In testing here in several browsers it was fine without those divisions. But it's possible that some browser I didn't test in might require the div tags. It also could be done with the divisions, but without the a tags. You would then probably want to add to the styles:

Code:

.prev, .next {
          cursor: pointer;
}

Glad it worked out.

Can you explain what cursor: pointer; accomplishes? I need the a tags so that the image will scroll through the slides. Would putting cursor: pointer; in replace the need somehow to have the a tags?

**jscheuer1** · 01-08-2010, 05:44 AM

You don't need the links. You need the classes, "prev" and "next". So, if you got rid of the a tags and kept just the divisions, you would need to give the one div tag a class of prev, the other one of next.

All the cursor pointer does is provide the user with the telltale finger pointing cursor usually associated with links - a visual clue that clicking here will produce some effect.

In fact, you could get rid of the divs and the a tags and just use the images, as long as you gave each img tag the appropriate class name. In that case you would probably also want the style for the cursor as described in my previous post, for the same reason as mentioned in this one.

What you cannot do is have it like it was. What was happening there was that when someone clicked on the a tag, they were also clicking on the div tag, each of which had the class name prev or next, so it moved 2 panels for each click instead of the desired 1 panel.

**nemetzger** · 01-09-2010, 08:55 PM

Problem site: http://www.logomasterpiece.com/

Okay, I have it working great now with one exception. When you first go to the page it is on, it does not show the first slide as default. It has a white box there and then the first slide comes in. I think it did have the first slide showing as default before I moved it to another page. I am not sure what I did that made it stop displaying a default slide upon entering the website.

Note, I moved the slide to the main page now at
http://www.logomasterpiece.com/

p.s. Is there a way to have it go from one slide to the other as a fade? The only options say updown downup rightleft leftright and I don't know if it is possible to have it fade or just appear without actually sliding in.

Code:

<script type="text/javascript">

featuredcontentglider.init({
	gliderid: "portfoliothumbs", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 900, //Glide animation duration (in milliseconds)
	direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: true, //Auto rotate contents (true/false)?
	autorotateconfig: [6000, 0] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<div id="p-select" class="glidecontenttoggler">

<div class="prev">
<img src="images/portfolioleftarrow.gif" border="0" alt="left arrow">
</div>


<div id="portfoliothumbs" class="glidecontentwrapper">

<div class="glidecontent"><img src="portfolio/portfoliothumbs/logoslide1.png" alt="Affordable. Unique. Professional. Custom Logo Design Starting at $85"></div>

<div class="glidecontent"><img src="portfolio/portfoliothumbs/webslide1.png" alt="Creative Web Design Made Affordable. Websites Starting at $195"></div>

<div class="glidecontent"><div id="logogalleryslide">
<div id="gotologogallerybox"><a href="portfolio/logogallery.html" id="gotologogallerybutton"><i>Browse our unique, creative and professional logo design gallery.</i></a></div>
<div id="gototestimonialsbox"><a href="testimonials.html" id="gototestimonialsbutton"><i>Read testimonials.</i></a></div>
</div></div>


<div class="glidecontent"><div id="packageslide">
<div id="gotopackagesbox"><a href="packages/index.html" id="gotopackagesbutton"><i>Choose from many great packages.</i></a></div>
<div id="contactbox"><a href="contact.html" id="contactbutton"><i>Contact us for a customized quote.</i></a></div>
</div></div>



</div>

<div class="next">
<img src="images/portfoliorightarrow.gif" border="0" alt="right arrow">
</div>

</div>

Thread: Featured Content Glider Help

Thread Tools

Search Thread

Featured Content Glider Help

Bookmarks

Bookmarks

Posting Permissions