Results 1 to 6 of 6

Thread: Content Slider Help

  1. #1
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Content Slider Help

    1) Script Title: Featured Content Slider

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

    3) Describe problem: I'm very embarrassed. I can't get this to work at all. I have no idea how to point it to what images I want. I want to use the auto display mode for numerous pictures. I can't even get it to work with the images provided on the script page I feel like I'm reading a foreign language when reading the directions.

    I'm not sure what I'm asking for here. I really want to make this work but have no clue as to what I'm doing with it. It's unclear to me how to get this to simply be on a page, change pictures upon mouseover. Oh by the way, I can change colors of the frame around the content and change that mouseover option BUT there's nothing there to change. I have a blank box.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Its very simple on what you need to do:
    Download contentslider.css.
    Download contentslider.js.
    Downlaod loading.gif.
    Now that you've got the files need, make a page called "test.html".

    In it put this code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <link rel="stylesheet" type="text/css" href="contentslider.css" />
    
    <script type="text/javascript" src="contentslider.js">
    
    /***********************************************
    * Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <h2>Example 1</h2>
    
    <!--Inner content DIVs should always carry "contentdiv" CSS class-->
    <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
    
    <div id="slider1" class="sliderwrapper">
    
    <div class="contentdiv">
    Content 1 Here. <br />
    <p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
    </div>
    
    <div class="contentdiv">
    Content 2 Here.
    </div>
    
    <div class="contentdiv">
    Content 3 Here.
    </div>
    
    </div>
    
    <div id="paginate-slider1" class="pagination">
    
    </div>
    
    <script type="text/javascript">
    
    featuredcontentslider.init({
    	id: "slider1",  //id of main slider DIV
    	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    	toc: "#increment",  //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: [true, 3000],  //[true/false, pausetime]
    	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
    		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    	}
    })
    
    </script>
    
    
    
    
    <br />
    <h2>Example 2, Pagination links from markup</h2>
    
    <!--Inner content DIVs should always carry "contentdiv" CSS class-->
    <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
    
    <div id="slider2" class="sliderwrapper">
    
    <div class="contentdiv">
    Content 1 Here.
    </div>
    
    <div class="contentdiv">
    Content 2 Here. <br />
    <p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p>
    </div>
    
    <div class="contentdiv">
    Content 3 Here.
    </div>
    
    </div>
    
    <div id="paginate-slider2" class="pagination">
    
    <a href="#" class="toc">First Page</a> <a href="#" class="toc anotherclass">Second Page</a> <a href="#" class="toc">Third Page</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a>
    
    </div>
    
    <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
    		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    	}
    })
    
    </script>
    Now that you have it stalled correctly, open test.html. Now you have a content slider.
    Jeremy | jfein.net

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

    Default

    Yep I did exactly that and I end up with whats posted below. No images and no thumbnails. I have no idea how to get those thumbnails there or how to point the script or scripts to the correct images. All I can do is change the colors of the frame

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    You've gotta put in your own images, please read the directions on the page.
    Jeremy | jfein.net

  5. #5
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yep of course I would put my own images in eventually but for the test page I put in the images that were on the script page, horses, ocean, pine and that sushi one.

    I guess I'm not understanding the lines of code that need to be changed...OH WAIT....can it be that I'm using Firefox 3?

  6. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    No, it works perfectly in FireFox 3, please send me a link to your page. IF its not online please upload it online.
    Jeremy | jfein.net

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
  •