Jump to content

Suggestions on how to fix my slider


hoku_007

Recommended Posts

!DOCTYPE html><html><head><meta charset="utf-8" /><title>Graduation Announcements</title><meta name="keywords" content="photography" /><meta name="description" content="portfolio" /><!--Template 2043 Pinky Flowhttp://www.tooplate.com/view/2043-pinky-flow--><link href="css/tooplate_style.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/ddsmoothmenu.js"></script><script type="text/javascript">ddsmoothmenu.init({	mainmenuid: "tooplate_menu", //menu DIV id	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"	classname: 'ddsmoothmenu', //class added to menu's outer DIV	//customtheme: ["#1c5a80", "#18374a"],	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]})</script>    <!-- use jssor.slider.min.js instead for release -->    <!-- jssor.slider.min.js = (jssor.js + jssor.slider.js) -->    <script type="text/javascript" src="js/jssor.js"></script>    <script type="text/javascript" src="js/jssor.slider.js"></script>    <script type="text/javascript">        jssor_slider2_starter = function (containerId) {            var options = {                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false                $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1                $AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1                $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false                $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20                //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container                //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container                $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0                $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1                $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.                $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).                $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)                $ArrowNavigatorOptions: {                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance                    $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always                    $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1                },                $ThumbnailNavigatorOptions: {                    $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always                    $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1                    $AutoCenter: 3,                                 //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1                    $SpacingX: 3,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0                    $SpacingY: 3,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0                    $DisplayPieces: 9,                              //[Optional] Number of pieces to display, default value is 1                    $ParkingPosition: 260,                          //[Optional] The offset position to park thumbnail                    $Orientation: 1,                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1                    $DisableDrag: false                            //[Optional] Disable drag or not, default value is false                }            };            var jssor_slider2 = new $JssorSlider$(containerId, options);            //responsive code begin            //you can remove responsive code if you don't want the slider scales while window resizes            function ScaleSlider() {                var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;                if (parentWidth)                    jssor_slider2.$ScaleWidth(Math.min(parentWidth, 600));                else                    $Jssor$.$Delay(ScaleSlider, 30);            }            ScaleSlider();            $Jssor$.$AddEvent(window, "load", ScaleSlider);            $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);            //responsive code end        };    </script>                     <!-- Trigger -->        <script type="text/javascript">            jssor_slider2_starter('slider2_container');        </script>              </head><body><!--* Smooth Navigational Menu- (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 full source code--><div id="tooplate_wrapper">	<div id="tooplate_header">       	<div id="site_title"><h1><a href="index.html">Rubi Noodle Studios</a></h1></div>    	        <div id="tooplate_menu" class="ddsmoothmenu">                <ul>                    <li><a href="index.html" class="selected"><span></span>Home</a></li>                    <li><a href="gallery.html"><span></span>Galleries</a>                        <ul>							<li><a href="families.html">Families</a></li>                            <li><a href="children.html">Children</a></li>                            <li><a href="graduates.html">Graduates</a></li>                             <li><a href="engagement.html">Engagement</a></li>                            <li><a href="weddings.html">Weddings</a></li>                             <li><a href="maternity.html">Maternity</a></li>                                                 </ul>                  </li>                    <li><a href="information.html"><span></span>Information</a>                        <ul>                            <li><a href="announcements.html">Graduation Announcements</a></li>                            <li><a href="pricing.html">Pricing</a></li>                            <li><a href="hints.html">Helpful Hints</a></li>                                                 </ul>                  </li>                    <li><a href="client.html"><span></span>Client Viewing</a></li>                    <li><a href="contact.html"><span></span>Contact</a></li>                </ul>                <br style="clear: left" />            </div> <!-- end of tooplate_menu -->                        <div id="tooplate_main">            	<h2 style="text-align:center;">Graduation Announcements</h2>              </div> <!-- end of tooplate_main -->                            <!-- Jssor Slider Begin -->             <!-- You can move inline styles to css file or css block. -->           <div id="slider_container2" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">               <!-- ThumbnailNavigator Skin Begin -->            <div id="thumbnavigator" class="jssort03" style="position: absolute; width: 600px; height: 60px; left:0px; bottom: 0px;">            <div style=" background-color: #000; filter:alpha(opacity=30); opacity:.3; width: 100%; height:100%;">                        <!-- Loading Screen -->        <div id="loading" style="position: absolute; top: 0px; left: 0px;">            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">        <!-- Slides Container -->        <div id="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">            <div>                <img id="image1" src="images/photography/002.jpg" alt="photo" />                <img id="thumb1" src="images/photography/thumb-002.jpg" alt="thumb" />            </div>            <div>                <img id="image2" src="images/photography/003.jpg" alt="photo" />                <img id="thumb2" src="images/photography/thumb-003.jpg" alt="thumb" />            </div>            <div>                <img id="image3" src="images/photography/004.jpg" alt="photo" />                <img id="thumb3" src="images/photography/thumb-004.jpg" alt="thumb" />            </div>            <div>                <img id="image4" src="images/photography/005.jpg" alt="photo" />                <img id="thumb4" src="images/photography/thumb-005.jpg" alt="thumb" />            </div>            <div>                <img id="image5" src="images/photography/006.jpg" alt="photo" />                <img id="thumb5" src="images/photography/thumb-006.jpg" alt="thumb" />            </div>            <div>                <img id="image6" src="images/photography/007.jpg" alt="photo" />                <img id="thumb6" src="images/photography/thumb-007.jpg" alt="thumb" />            </div>            <div>                <img id="image7" src="images/photography/008.jpg" alt="photo" />                <img id="thumb7" src="images/photography/thumb-008.jpg" alt="thumb" />            </div>            <div>                <img id="image8" src="images/photography/009.jpg" alt="photo" />                <img id="thumb8" src="../img/photography/thumb-009.jpg" alt="thumb" />            </div>            <div>                <img id="image9" src="images/photography/010.jpg" alt="photo" />                <img id="thumb9" src="images/photography/thumb-010.jpg" alt="thumb" />            </div>            <div>                <img id="image10" src="images/photography/011.jpg" alt="photo" />                <img id="thumb10" src="images/photography/thumb-011.jpg" alt="thumb" />            </div>        </div>               </div>            <div style="position: absolute; display: block; background: url(images/loading.gif) no-repeat center center;                top: 0px; left: 0px;width: 100%;height:100%;">            </div>        </div>                           <!-- Arrow Left -->        <span id="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 123px; left: 8px;">        </span>        <!-- Arrow Right -->        <span id="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 123px; right: 8px">        </span>        <!-- Arrow Navigator Skin End -->              <!-- Thumbnail Item Skin End -->        </div>        <!-- ThumbnailNavigator Skin End -->        <a style="display: none" href="http://www.jssor.com">bootstrap carousel</a>           </div>    <!-- Jssor Slider End -->            <div id="tooplate_footer">                Copyright ? 2014 <a href="index.html">Rubi Noodle Studios</a> | Design: <a href="http://www.tooplate.com">tooplate</a>                <div class="cleaner"></div>            </div>            </div> <!-- end of forever header -->    </div>    </div></body> </html>

My image slider is not working nor is my template, however my code passed the validator, but my css didn't pass because there were two errors.

 

 

 

Link to comment
Share on other sites

You probably should call the jssor_slider2_starter() function after the element has loaded.

 

It's a good idea to put all your scripts at the bottom of the page right before the closing </body> tag to make sure that all other page elements have loaded already.

Link to comment
Share on other sites

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Graduation Announcements</title><meta name="keywords" content="photography" /><meta name="description" content="portfolio" /><!--Template 2043 Pinky Flowhttp://www.tooplate.com/view/2043-pinky-flow--><link href="css/tooplate_style.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/ddsmoothmenu.js"></script><script type="text/javascript">ddsmoothmenu.init({	mainmenuid: "tooplate_menu", //menu DIV id	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"	classname: 'ddsmoothmenu', //class added to menu's outer DIV	//customtheme: ["#1c5a80", "#18374a"],	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]})</script>            </head><body><!--* Smooth Navigational Menu- (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 full source code--><div id="tooplate_wrapper">	<div id="tooplate_header">       	<div id="site_title"><h1><a href="index.html">Rubi Noodle Studios</a></h1></div>    	        <div id="tooplate_menu" class="ddsmoothmenu">                <ul>                    <li><a href="index.html" class="selected"><span></span>Home</a></li>                    <li><a href="gallery.html"><span></span>Galleries</a>                        <ul>							<li><a href="families.html">Families</a></li>                            <li><a href="children.html">Children</a></li>                            <li><a href="graduates.html">Graduates</a></li>                             <li><a href="engagement.html">Engagement</a></li>                            <li><a href="weddings.html">Weddings</a></li>                             <li><a href="maternity.html">Maternity</a></li>                                                 </ul>                  </li>                    <li><a href="information.html"><span></span>Information</a>                        <ul>                            <li><a href="announcements.html">Graduation Announcements</a></li>                            <li><a href="pricing.html">Pricing</a></li>                            <li><a href="hints.html">Helpful Hints</a></li>                                                 </ul>                  </li>                    <li><a href="client.html"><span></span>Client Viewing</a></li>                    <li><a href="contact.html"><span></span>Contact</a></li>                </ul>                <br style="clear: left" />            </div> <!-- end of tooplate_menu -->                        <div id="tooplate_main">            	<h2 style="text-align:center;">Graduation Announcements</h2>              </div> <!-- end of tooplate_main -->                            <!-- Jssor Slider Begin -->             <!-- You can move inline styles to css file or css block. -->           <div id="slider_container2" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">               <!-- ThumbnailNavigator Skin Begin -->            <div id="thumbnavigator" class="jssort03" style="position: absolute; width: 600px; height: 60px; left:0px; bottom: 0px;">            <div style=" background-color: #000; filter:alpha(opacity=30); opacity:.3; width: 100%; height:100%;">                        <!-- Loading Screen -->        <div id="loading" style="position: absolute; top: 0px; left: 0px;">            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">        <!-- Slides Container -->        <div id="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">            <div>                <img id="image1" src="images/photography/002.jpg" alt="photo" />                <img id="thumb1" src="images/photography/thumb-002.jpg" alt="thumb" />            </div>            <div>                <img id="image2" src="images/photography/003.jpg" alt="photo" />                <img id="thumb2" src="images/photography/thumb-003.jpg" alt="thumb" />            </div>            <div>                <img id="image3" src="images/photography/004.jpg" alt="photo" />                <img id="thumb3" src="images/photography/thumb-004.jpg" alt="thumb" />            </div>            <div>                <img id="image4" src="images/photography/005.jpg" alt="photo" />                <img id="thumb4" src="images/photography/thumb-005.jpg" alt="thumb" />            </div>            <div>                <img id="image5" src="images/photography/006.jpg" alt="photo" />                <img id="thumb5" src="images/photography/thumb-006.jpg" alt="thumb" />            </div>            <div>                <img id="image6" src="images/photography/007.jpg" alt="photo" />                <img id="thumb6" src="images/photography/thumb-007.jpg" alt="thumb" />            </div>            <div>                <img id="image7" src="images/photography/008.jpg" alt="photo" />                <img id="thumb7" src="images/photography/thumb-008.jpg" alt="thumb" />            </div>            <div>                <img id="image8" src="images/photography/009.jpg" alt="photo" />                <img id="thumb8" src="../img/photography/thumb-009.jpg" alt="thumb" />            </div>            <div>                <img id="image9" src="images/photography/010.jpg" alt="photo" />                <img id="thumb9" src="images/photography/thumb-010.jpg" alt="thumb" />            </div>            <div>                <img id="image10" src="images/photography/011.jpg" alt="photo" />                <img id="thumb10" src="images/photography/thumb-011.jpg" alt="thumb" />            </div>        </div>               </div>            <div style="position: absolute; display: block; background: url(images/loading.gif) no-repeat center center;                top: 0px; left: 0px;width: 100%;height:100%;">            </div>        </div>                           <!-- Arrow Left -->        <span id="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 123px; left: 8px;">        </span>        <!-- Arrow Right -->        <span id="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 123px; right: 8px">        </span>        <!-- Arrow Navigator Skin End -->              <!-- Thumbnail Item Skin End -->        </div>        <!-- ThumbnailNavigator Skin End -->        <a style="display: none" href="http://www.jssor.com">bootstrap carousel</a>           </div>    <!-- Jssor Slider End -->            <div id="tooplate_footer">                Copyright ? 2014 <a href="index.html">Rubi Noodle Studios</a> | Design: <a href="http://www.tooplate.com">tooplate</a>                <div class="cleaner"></div>            </div>            </div> <!-- end of forever header -->    </div>    </div>   <!-- use jssor.slider.min.js instead for release -->    <!-- jssor.slider.min.js = (jssor.js + jssor.slider.js) -->    <script type="text/javascript" src="js/jssor.js"></script>    <script type="text/javascript" src="js/jssor.slider.js"></script>    <script type="text/javascript">        jssor_slider2_starter = function (containerId) {            var options = {                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false                $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1                $AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1                $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false                $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20                //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container                //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container                $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0                $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1                $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.                $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).                $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)                $ArrowNavigatorOptions: {                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance                    $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always                    $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1                },                $ThumbnailNavigatorOptions: {                    $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always                    $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1                    $AutoCenter: 3,                                 //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1                    $SpacingX: 3,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0                    $SpacingY: 3,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0                    $DisplayPieces: 9,                              //[Optional] Number of pieces to display, default value is 1                    $ParkingPosition: 260,                          //[Optional] The offset position to park thumbnail                    $Orientation: 1,                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1                    $DisableDrag: false                            //[Optional] Disable drag or not, default value is false                }            };            var jssor_slider2 = new $JssorSlider$(containerId, options);            //responsive code begin            //you can remove responsive code if you don't want the slider scales while window resizes            function ScaleSlider() {                var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;                if (parentWidth)                    jssor_slider2.$ScaleWidth(Math.min(parentWidth, 600));                else                    $Jssor$.$Delay(ScaleSlider, 30);            }            ScaleSlider();            $Jssor$.$AddEvent(window, "load", ScaleSlider);            $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);            //responsive code end        };    </script>                     <!-- Trigger -->        <script type="text/javascript">            jssor_slider2_starter('slider2_container');        </script>   </body> </html>

Like so?

Link to comment
Share on other sites

Does that mean that I named my id wrong or I am not calling the right id?

 

That should be easy to figure out: Look at the ID you're giving it, then look at the ID of the element itself, see if they match.

It would have taken you less time to look through your own code than to wait for an answer from me.

 

So here's what I see:

You are telling it to look for "slider2_container"

There is an element on your page called "slider_container2"

Link to comment
Share on other sites

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Graduation Announcements</title><meta name="keywords" content="photography" /><meta name="description" content="portfolio" /><!--Template 2043 Pinky Flowhttp://www.tooplate.com/view/2043-pinky-flow--><link href="css/tooplate_style.css" rel="stylesheet" type="text/css" />	<script type="text/javascript" src="js/swfobject.js"></script>    <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/ddsmoothmenu.js">/************************************************ Smooth Navigational Menu- (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 full source code***********************************************/</script><script type="text/javascript">ddsmoothmenu.init({	mainmenuid: "tooplate_menu", //menu DIV id	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"	classname: 'ddsmoothmenu', //class added to menu's outer DIV	//customtheme: ["#1c5a80", "#18374a"],	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]})</script><!-- Caption Style -->    <style type="text/css">         .captionOrange, .captionBlack        {            color: #fff;            font-size: 20px;            line-height: 30px;            text-align: center;            border-radius: 4px;        }        .captionOrange        {            background: #EB5100;            background-color: rgba(235, 81, 0, 0.6);        }        .captionBlack        {        	font-size:16px;            background: #000;            background-color: rgba(0, 0, 0, 0.4);        }        a.captionOrange, A.captionOrange:active, A.captionOrange:visited        {        	color: #ffffff;        	text-decoration: none;        }        a.captionOrange:hover        {            color: #eb5100;            text-decoration: underline;            background-color: #eeeeee;            background-color: rgba(238, 238, 238, 0.7);        }        .bricon        {            background: url(../img/browser-icons.png);        }    </style></head><body><div id="tooplate_wrapper">	<div id="tooplate_header">       	<div id="site_title"><h1><a href="index.html">Rubi Noodle Studios</a></h1></div>    	        <div id="tooplate_menu" class="ddsmoothmenu">                <ul>                    <li><a href="index.html" class="selected"><span></span>Home</a></li>                    <li><a href="gallery.html"><span></span>Galleries</a>                        <ul>							<li><a href="families.html">Families</a></li>                            <li><a href="children.html">Children</a></li>                            <li><a href="graduates.html">Graduates</a></li>                             <li><a href="engagement.html">Engagement</a></li>                            <li><a href="weddings.html">Weddings</a></li>                             <li><a href="maternity.html">Maternity</a></li>                                                 </ul>                  </li>                    <li><a href="information.html"><span></span>Information</a>                        <ul>                            <li><a href="announcements.html">Graduation Announcements</a></li>                            <li><a href="pricing.html">Pricing</a></li>                            <li><a href="hints.html">Helpful Hints</a></li>                                                 </ul>                  </li>                    <li><a href="client.html"><span></span>Client Viewing</a></li>                    <li><a href="contact.html"><span></span>Contact</a></li>                </ul>                <br style="clear: left" />            </div> <!-- end of tooplate_menu -->                      <div id="tooplate_main">            	                <div id="tooplate_slider">                    <div id="flash_grid_slider">                        </div>				    </div>                                <div id="tooplate_content">                                	<h2>Graduation Announcements</h2>                                        <div class="image_wrapper image_fl">                    </div>                                          <div class="cleaner h40">                     </div>                                                <div class="col_allw280 fp_service_box">                                                                        <!-- Jssor Slider Begin -->    <!-- You can move inline styles to css file or css block. -->    <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">        <!-- Loading Screen -->        <div u="loading" style="position: absolute; top: 0px; left: 0px;">            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">            </div>            <div style="position: absolute; display: block; background: url(images/loading.gif) no-repeat center center;                top: 0px; left: 0px;width: 100%;height:100%;">            </div>        </div>        <!-- Slides Container -->        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">            <div>                <img u="image" src="images/photography/002.jpg" />                <img u="thumb" src="images/photography/thumb-002.jpg" />            </div>            <div>                <img u="image" src="images/photography/003.jpg" />                <img u="thumb" src="images/photography/thumb-003.jpg" />            </div>            <div>                <img u="image" src="images/photography/004.jpg" />                <img u="thumb" src="images/photography/thumb-004.jpg" />            </div>            <div>                <img u="image" src="images/photography/005.jpg" />                <img u="thumb" src="images/photography/thumb-005.jpg" />            </div>            <div>                <img u="image" src="images/photography/006.jpg" />                <img u="thumb" src="images/photography/thumb-006.jpg" />            </div>            <div>                <img u="image" src="images/photography/007.jpg" />                <img u="thumb" src="images/photography/thumb-007.jpg" />            </div>            <div>                <img u="image" src="images/photography/008.jpg" />                <img u="thumb" src="images/photography/thumb-008.jpg" />            </div>            <div>                <img u="image" src="images/photography/009.jpg" />                <img u="thumb" src="images/photography/thumb-009.jpg" />            </div>            <div>                <img u="image" src="images/photography/010.jpg" />                <img u="thumb" src="images/photography/thumb-010.jpg" />            </div>            <div>                <img u="image" src="images/photography/011.jpg" />                <img u="thumb" src="images/photography/thumb-011.jpg" />            </div>        </div>                <!-- Arrow Navigator Skin Begin -->        <style type="text/css">            /* jssor slider arrow navigator skin 02 css */            /*            .jssora02l              (normal)            .jssora02r              (normal)            .jssora02l:hover        (normal mouseover)            .jssora02r:hover        (normal mouseover)            .jssora02ldn            (mousedown)            .jssora02rdn            (mousedown)            */            .jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn            {            	position: absolute;            	cursor: pointer;            	display: block;                background: url(images/a02.png) no-repeat;                overflow:hidden;            }            .jssora02l { background-position: -3px -33px; }            .jssora02r { background-position: -63px -33px; }            .jssora02l:hover { background-position: -123px -33px; }            .jssora02r:hover { background-position: -183px -33px; }            .jssora02ldn { background-position: -243px -33px; }            .jssora02rdn { background-position: -303px -33px; }        </style>        <!-- Arrow Left -->        <span u="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 123px; left: 8px;">        </span>        <!-- Arrow Right -->        <span u="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 123px; right: 8px">        </span>        <!-- Arrow Navigator Skin End -->                <!-- ThumbnailNavigator Skin Begin -->        <div u="thumbnavigator" class="jssort03" style="position: absolute; width: 600px; height: 60px; left:0px; bottom: 0px;">            <div style=" background-color: #000; filter:alpha(opacity=30); opacity:.3; width: 100%; height:100%;"></div>            <!-- Thumbnail Item Skin Begin -->            <style type="text/css">                /* jssor slider thumbnail navigator skin 03 css */                /*                .jssort03 .p            (normal)                .jssort03 .p:hover      (normal mouseover)                .jssort03 .pav          (active)                .jssort03 .pav:hover    (active mouseover)                .jssort03 .pdn          (mousedown)                */                .jssort03 .w, .jssort03 .pav:hover .w                {                	position: absolute;                	width: 60px;                	height: 30px;                	border: white 1px dashed;                }                * html .jssort03 .w                {                	width /**/: 62px;                	height /**/: 32px;                }                .jssort03 .pdn .w, .jssort03 .pav .w { border-style: solid; }                .jssort03 .c                {                	width: 62px;                	height: 32px;                	filter:  alpha(opacity=45);                	opacity: .45;                	                	transition: opacity .6s;                    -moz-transition: opacity .6s;                    -webkit-transition: opacity .6s;                    -o-transition: opacity .6s;                }                .jssort03 .p:hover .c, .jssort03 .pav .c                {                	filter:  alpha(opacity=0);                	opacity: 0;                }                .jssort03 .p:hover .c                {                	transition: none;                    -moz-transition: none;                    -webkit-transition: none;                    -o-transition: none;                }            </style>            <div u="slides" style="cursor: move;">                <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 62px; HEIGHT: 32px; TOP: 0; LEFT: 0;">                    <div class=w><div u="thumbnailtemplate" style=" WIDTH: 100%; HEIGHT: 100%; border: none;position:absolute; TOP: 0; LEFT: 0;"></div></div>                    <div class=c style="POSITION: absolute; BACKGROUND-COLOR: #000; TOP: 0; LEFT: 0">                    </div>                </div>            </div>            <!-- Thumbnail Item Skin End -->        </div>        <!-- ThumbnailNavigator Skin End -->        <a style="display: none" href="http://www.jssor.com">bootstrap carousel</a>              <!-- Thumbnail Item Skin End -->        <!-- Trigger -->        <script type="text/javascript">            jssor_slider2_starter('slider2_container');        </script>    </div>    <!-- Jssor Slider End -->                                </div>                                                <div class="col_allw280 fp_service_box">                         </div>                                        <div class="col_allw280 fp_service_box col_last">                        </div>                                	<div class="cleaner"></div>                </div>				                <div class="cleaner"></div>            </div> <!-- end of tooplate_main -->                        <div id="tooplate_footer">                Copyright © 2014 <a href="index.html">Rubi Noodle Studios</a> | Design: <a href="http://www.tooplate.com">tooplate</a>                <div class="cleaner"></div>            </div>            </div> <!-- end of forever header --></div> <!-- end of forever wrapper --><!-- it works the same with all jquery version from 1.x to 2.x -->    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>        <!-- use jssor.slider.min.js instead for release -->    <!-- jssor.slider.min.js = (jssor.js + jssor.slider.js) -->    <script type="text/javascript" src="js/jssor.js"></script>    <script type="text/javascript" src="js/jssor.slider.js"></script>            <script type="text/javascript">        jssor_slider2_starter = function (containerId) {            var options = {                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false                $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1                $AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1                $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false                $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20                //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container                //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container                $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0                $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1                $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.                $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).                $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)                $ArrowNavigatorOptions: {                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance                    $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always                    $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1                },                $ThumbnailNavigatorOptions: {                    $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always                    $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1                    $AutoCenter: 3,                                 //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1                    $SpacingX: 3,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0                    $SpacingY: 3,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0                    $DisplayPieces: 9,                              //[Optional] Number of pieces to display, default value is 1                    $ParkingPosition: 260,                          //[Optional] The offset position to park thumbnail                    $Orientation: 1,                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1                    $DisableDrag: false                            //[Optional] Disable drag or not, default value is false                }            };            var jssor_slider2 = new $JssorSlider$(containerId, options);            //responsive code begin            //you can remove responsive code if you don't want the slider scales while window resizes            function ScaleSlider() {                var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;                if (parentWidth)                    jssor_slider2.$ScaleWidth(Math.min(parentWidth, 600));                else                    $Jssor$.$Delay(ScaleSlider, 30);            }            ScaleSlider();            $Jssor$.$AddEvent(window, "load", ScaleSlider);            $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);            //responsive code end        };    </script></body></html>

I think it got it now. Everything shows up just the way its suppose to, just cant get my slides to move or my thumbnails to show. I've made sure that I have my js, plugins, and images are in the right folder. My console says : Reference error: jssor_slider2_starter is not defined. 295

Link to comment
Share on other sites

You have to call the function after you have declared it.

 

This line:

jssor_slider2_starter('slider2_container');

has to go further down in the page than this line:

jssor_slider2_starter = function (containerId) {
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...