PDA

View Full Version : 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/dynamicindex17/featuredcontentglider.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:



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


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


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:


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


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



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


.prev, .next {
cursor: pointer;
}

Glad it worked out.

nemetzger
01-07-2010, 07:52 PM
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:


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



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

jscheuer1
01-10-2010, 02:27 PM
How quickly and how fully the first image appears is governed more by how long it takes the browser to download it. If the first image is already cached or downloads quickly, it will appear to slide into an initially blank canvas. If on the other hand it is slow to download, it will slide in before it loads and appear to load normally as though it was already there. With minor modifications it can be worked out that there will be a 'cover' image until the first item glides in. However, exactly how that works out will also be somewhat at the mercy of whether or not the cover image is cached and/or downloads quickly or not.

The glider only glides, There is the slider:

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

which does do a fade transition, as well as Ultimate Fade:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

nemetzger
01-10-2010, 03:10 PM
Thanks for those links. I might end up working on replacing with one of those later on. I didn't realize at the time I chose the script what I wanted to do with it yet. I only decided a fade might be better after I got into heavily customizing it.

Show and tell:
Please see both places I used this script:

http://www.logomasterpiece.com/

http://ne.logomasterpiece.com/

Thanks so much for your help.