Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Featured Content Glider Help

  1. #1
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Featured Content Glider Help

    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'

  2. #2
    Join Date
    Aug 2004
    Posts
    9,910
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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?
    DD Admin

  3. #3
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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'

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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?

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,126
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>
    Last edited by nemetzger; 01-09-2010 at 09:35 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •