Results 1 to 6 of 6

Thread: Content Slider 2.4 Help

  1. #1
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Content Slider 2.4 Help

    1) Script Title:
    Featured Content Slider 2.4

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

    3) Describe problem:
    Basically i have been customising the script (color/theme) wise, however i can't get something to work, and i've been going at it for about 3 days now.

    Anyway, basically i want the pagination thing to look something like this:



    I want that image to be the bases for all contents...when not selected. And the image below is for content that is selected. Can someone somehow give me the code to do this?



    I'd really appreciate it.

    Best Regards,
    Tom

  2. #2
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    I'm not sure I understand. Are you merely trying to have the pagination links' background a solid color of black, unless the link in question is selected? How are you applying this background to the links (ie: via CSS? Please post a link to the page on your site that contains the problematic script so we can check it out.

  3. #3
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'll show you a picture of what i want.



    That is what i want my content slider to look like....Now that image is used when the current piece of content is selected...while is used when the current piece of content is not selected.

    the current html i've got is:

    Code:
    <div id="paginate-slider1" class="pagination">
    
    
    <a href="#" class="toc"><img border="0" src="minisite/images/bar_no.gif"></a>
    <a href="#" class="toc"><img border="0" src="minisite/images/bar_no.gif"></a>
    <a href="#" class="toc"><img border="0" src="minisite/images/bar_no.gif"></a>
    </div>
    and my css is:

    Code:
    .pagination{
    height: 40px;
    width: 600px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
    text-align: left;
    padding: 0px 10px;
    }
    
    .pagination a{
    height: 40px;
    width: 33px;
    padding: 0 5px;
    border: 0px;
    
    }
    
    #pagination a:hover, #pagination a.selected {
    border: 0px;
    }
    I have tried inserting the background-image property for the pagination classes but that doesn't work....

  4. #4
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    Since your pagination links are actual images, you can't use CSS to style the "selected" image by changing its src to a different image. What you need in this case is to make use of the script's onChange event handler. Assuming your pagination links look something like:

    Code:
    <div id="paginate-slider2" class="pagination">
    
    <a href="#" class="toc" style="margin-left: 35px"><img src="default.png" /></a> <a href="#" class="toc someclass"><img src="default.png" /></a> <a href="#" class="toc someotheclass"><img src="default.png" /></a> <a href="#" class="toc someotheclass"><img src="default.png" /></a>
    
    </div>
    
    By using the "markup" mode to manually specify the pagination HTML. Your initialization code then to get the selected pagination link's image to change to "selected.png" would look like:
    
    <script type="text/javascript">
    
    featuredcontentslider.init({
    	id: "slider2",  //id of main slider DIV
    	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    	toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    	enablefade: [true, 0.2],  //[true/false, fadedegree]
    	autorotate: [false, 3000],  //[true/false, pausetime]
    	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
    		var toclinks=featuredcontentslider.settingcaches["slider2"].toclinks //reference all "toc" links within pagination DIV (array)
    		toclinks[previndex-1].firstChild.src="default.png"
    		toclinks[curindex-1].firstChild.src="selected.png"
    	}
    })
    
    </script>

  5. #5
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much!

    You are awesome!

  6. #6
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello guys !

    This script is really wonderfull !!!

    Just would like to know if it is possible to have an other transition effect ?

    Thank you

    P.S.
    And maybe an other effect for the text like on websites you mentionned on the script's page ? (gamepost...)

    Thanks

Tags for this Thread

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
  •