Rockstar29 Posted June 2, 2013 Share Posted June 2, 2013 Hi I need help with writing code for imputing my slider into my website, everything is built but don't really understand how everything should be written for placing my slider. Also I'm not sure if this is the right place Thanks Link to comment Share on other sites More sharing options...
MarkT Posted June 2, 2013 Share Posted June 2, 2013 What is your slider going to do?Do you need the value?Etc. Link to comment Share on other sites More sharing options...
Rockstar29 Posted June 2, 2013 Author Share Posted June 2, 2013 Hi, The slider is going into my E commerce store <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>sos-slider</title> <link rel="stylesheet" href="http://www.sos-boardz.com/v/vspfiles/nivo-slider/nivo_slider.css" type="text/css" media="screen"> <style> .theme-default .nivoSlider { position:relative; background:#fff url(loading.gif) no-repeat 50% 50%; margin-bottom:10px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a;}.theme-default .nivoSlider img { position:absolute; top:0px; left:0px; display:none;}.theme-default .nivoSlider a { border:0; display:block;} .theme-default .nivo-controlNav { text-align: center; padding: 20px 0;}.theme-default .nivo-controlNav a { display:inline-block; width:22px; height:22px; background:url('http://www.sos-boardz.com/v/vspfiles/nivo-slider/themes/default/bullets.png') no-repeat; text-indent:-9999px; border:0; margin: 0 2px;}.theme-default .nivo-controlNav a.active { background-position:0 -22px;} .theme-default .nivo-directionNav a { display:block; width:30px; height:30px; background:url('http://www.sos-boardz.com/v/vspfiles/nivo-slider/themes/default/arrows.png')no-repeat; text-indent:-9999px; border:0; opacity: 0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}.theme-default:hover .nivo-directionNav a { opacity: 1; }.theme-default a.nivo-nextNav { background-position:-30px 0; right:15px;}.theme-default a.nivo-prevNav { left:15px;} .theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif;}.theme-default .nivo-caption a { color:#fff; border-bottom:1px dotted #fff;}.theme-default .nivo-caption a:hover { color:#fff;} .theme-default .nivo-controlNav.nivo-thumbs-enabled { width: 100%;}.theme-default .nivo-controlNav.nivo-thumbs-enabled a { width: auto; height: auto; background: none; margin-bottom: 5px;}.theme-default .nivo-controlNav.nivo-thumbs-enabled img { display: block; width: 120px; height: auto;} <style> img { max-width: 100% !important; height: auto !important;} </style> </head> <body> <div class="slider-wrapper theme-default "> <div id="slider" class="nivoSlider"> <img src="http://www.sos-boardz.com/v/vspfiles/nivo-slider/demo/images/nemo.jpg" alt="shop now"> <a href="http://www.sos-boardz.com/category_s/1868.htm"><img src="http://www.sos-boardz.com/ax4UcX9AyvbK/vspfiles/nivo-slider/demo/images/toystory.jpg" alt="shop online" title="#htmlcaption"></a> <a href="http://www.sos-boardz.com/category_s/1998.htm"><img src="http://www.sos-boardz.com/v/vspfiles/nivo-slider/demo/images/up.jpg" alt="shop now" title="online store"></a> </div> </div> <!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <!-- jQuery Plug-ins --> <script src="http://www.sos-boardz.com/v/vspfiles/images/jquery.zrssfeed.min.js" type="text/javascript"></script> <script src="http://www.sos-boardz.com/v/vspfiles/nivo-slider/jquery_nivo_slider_pack.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider').nivoSlider({ controlNav: true, // navigation effect: 'random', // transition animSpeed: 500, // transition speed pauseTime: 5000, // time slide will show randomStart: true // start on a random slide }); }); </script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body></html> Link to comment Share on other sites More sharing options...
Rockstar29 Posted June 7, 2013 Author Share Posted June 7, 2013 This is my Code for the Slider <!DOCTYPE html>[/color][color=#222222]<html>[/color][color=#222222][/color][color=#222222]<head>[/color][color=#222222][/color][color=#222222] <meta charset="utf-8">[/color][color=#222222] <title>sos-slider</title>[/color][color=#222222][/color][color=#222222] <link rel="stylesheet" href="http://www.sos-boardz.com/v/vspfiles/nivo-slider/nivo_slider.css" type="text/css" media="screen">[/color][color=#222222] <style>[/color][color=#222222] .theme-default .nivoSlider {[/color][color=#222222] position:relative;[/color][color=#222222] background:#fff url(loading.gif) no-repeat 50% 50%;[/color][color=#222222] margin-bottom:10px;[/color][color=#222222] -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;[/color][color=#222222] -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;[/color][color=#222222] box-shadow: 0px 1px 5px 0px #4a4a4a;[/color][color=#222222]}[/color][color=#222222].theme-default .nivoSlider img {[/color][color=#222222] position:absolute;[/color][color=#222222] top:0px;[/color][color=#222222] left:0px;[/color][color=#222222] display:none;[/color][color=#222222]}[/color][color=#222222].theme-default .nivoSlider a {[/color][color=#222222] border:0;[/color][color=#222222] display:block;[/color][color=#222222]}[/color][color=#222222][/color][color=#222222].theme-default .nivo-controlNav {[/color][color=#222222] text-align: center;[/color][color=#222222] padding: 20px 0;[/color][color=#222222]}[/color][color=#222222].theme-default .nivo-controlNav a {[/color][color=#222222] display:inline-block;[/color][color=#222222] width:22px;[/color][color=#222222] height:22px;[/color][color=#222222] background:url('http://www.sos-boardz.com/v/vspfiles/nivo-slider/themes/default/bullets.png') no-repeat;[/color][color=#222222] text-indent:-9999px;[/color][color=#222222] border:0;[/color][color=#222222] margin: 0 2px;[/color][color=#222222]}[/color][color=#222222].theme-default .nivo-controlNav a.active {[/color][color=#222222] background-position:0 -22px;[/color][color=#222222]}[/color][color=#222222][/color][color=#222222].theme-default .nivo-directionNav a {[/color][color=#222222] display:block;[/color][color=#222222] width:30px;[/color][color=#222222] height:30px;[/color][color=#222222] background:url('http://www.sos-boardz.com/v/vspfiles/nivo-slider/themes/default/arrows.png')no-repeat;[/color][color=#222222] text-indent:-9999px;[/color][color=#222222] border:0;[/color][color=#222222] opacity: 0;[/color][color=#222222] -webkit-transition: all 200ms ease-in-out;[/color][color=#222222] -moz-transition: all 200ms ease-in-out;[/color][color=#222222] -o-transition: all 200ms ease-in-out;[/color][color=#222222] transition: all 200ms ease-in-out;[/color][color=#222222]}[/color][color=#222222].theme-default:hover .nivo-directionNav a { opacity: 1; }[/color][color=#222222].theme-default a.nivo-nextNav {[/color][color=#222222] background-position:-30px 0;[/color][color=#222222] right:15px;[/color][color=#222222]}[/color][color=#222222].theme-default a.nivo-prevNav {[/color][color=#222222] left:15px;[/color][color=#222222]}[/color][color=#222222][/color][color=#222222].theme-default .nivo-caption {[/color][color=#222222] font-family: Helvetica, Arial, sans-serif;[/color][color=#222222]}[/color][color=#222222].theme-default .nivo-caption a {[/color][color=#222222] color:#fff;[/color][color=#222222] border-bottom:1px dotted #fff;[/color][color=#222222]}[/color][color=#222222].theme-default .nivo-caption a:hover {[/color][color=#222222] color:#fff;[/color][color=#222222]}[/color][color=#222222][/color][color=#222222].theme-default .nivo-controlNav.nivo-thumbs-enabled {[/color][color=#222222] width: 100%;[/color][color=#222222]}[/color][color=#222222].theme-default .nivo-controlNav.nivo-thumbs-enabled a {[/color][color=#222222] width: auto;[/color][color=#222222] height: auto;[/color][color=#222222] background: none;[/color][color=#222222] margin-bottom: 5px;[/color][color=#222222]}[/color][color=#222222].theme-default .nivo-controlNav.nivo-thumbs-enabled img {[/color][color=#222222] display: block;[/color][color=#222222] width: 120px;[/color][color=#222222] height: auto;[/color][color=#222222]}[/color][color=#222222] [/color][color=#222222] </style>[/color][color=#222222][/color][color=#222222]</head>[/color][color=#222222][/color][color=#222222]<body>[/color][color=#222222][/color][color=#222222][/color][color=#222222] <div class="slider-wrapper theme-default ">[/color][color=#222222] <div id="slider" class="nivoSlider">[/color][color=#222222] <img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boardz-slide-show-online-store-now-open-image-one.jpg"alt="shop now">[/color][color=#222222] <a href="http://dev7studios.com"><img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boards-slide-show-sector-9-Image-two.jpg" alt="shop online" title="#htmlcaption"></a>[/color][color=#222222] <img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boardz-slide-show-the-hundreds-image-three.jpg" alt="shop now" title="online store">[/color][color=#222222] </div>[/color][color=#222222] </div>[/color][color=#222222][/color][color=#222222][/color][color=#222222] <!-- jQuery -->[/color][color=#222222] <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>[/color][color=#222222] [/color][color=#222222] <!-- jQuery Plug-ins -->[/color][color=#222222] <script src="http://www.sos-boardz.com/v/vspfiles/images/jquery.zrssfeed.min.js" type="text/javascript"></script>[/color][color=#222222] <script src="http://www.sos-boardz.com/v/vspfiles/nivo-slider/jquery_nivo_slider_pack.js" type="text/javascript"></script>[/color][color=#222222] <script type="text/javascript">[/color][color=#222222] $(document).ready(function(){[/color][color=#222222] $('#slider').nivoSlider({[/color][color=#222222] controlNav: false, // navigation[/color][color=#222222] effect: 'random', // transition[/color][color=#222222] animSpeed: 500, // transition speed[/color][color=#222222] pauseTime: 5000, // time slide will show[/color][color=#222222] randomStart: true // start on a random slide[/color][color=#222222] });[/color][color=#222222] });[/color][color=#222222] </script>[/color][color=#222222] <script type="text/javascript">[/color][color=#222222] $(window).load(function() {[/color][color=#222222] $('#slider').nivoSlider();[/color][color=#222222] });[/color][color=#222222] </script>[/color][color=#222222][/color][color=#222222][/color][color=#222222]</body>[/color][color=#222222]</html>[/color][color=#222222] Link to comment Share on other sites More sharing options...
Rockstar29 Posted June 7, 2013 Author Share Posted June 7, 2013 (edited) Here`s the Code inserted into my template marked in red <!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"><head><meta name="google-site-verification" content="MiE-Dq_g991RteWZDvL2VmLxsrN9D3zAwsAOPOVKU0k" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HEREDO NOT ADD YOUR OWN META TAGSONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG--><link href="vspfiles/templates/winter_park/css/Imports.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="http://www.sos-boardz.com/v/vspfiles/nivo-slider/nivo_slider.css" type="text/css" media="screen"> <link rel="stylesheet" href="http://www.sos-boardz.com/v/vspfiles/nivo-slider/themes/default/default.css" type="text/css" media="screen"> <style> /* RSS Feed */ #sos_blog ul { list-style-type: none; } #sos_blog h1 { text-align: center; } </style><script type="text/javascript" src="vspfiles/templates/winter_park/js/custom.js"></script>[/color]<script type="text/javascript">jQuery(document).ready(function(){vCustomOnready();});</script><!--<meta id="v65-layout-mode" data-cart="storedot" data-checkout="storedot" />--><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-41066926-1', 'sos-boardz.com');ga('send', 'pageview'); </script></head><!-- ======================== FILE INFO ========================Premium template V-winter_parkDesigner: YuriCoder: J.H.Date: Feburary 2011======================== END INFO ======================== --><body id="body"><div id="page_wrapper"><!-- ======================== HEADER ======================== --><div id="sitetoolsbg"><div id="site_tools_contain"><div id="site_tools"><a href="Config_FullStoreURLdefault.asp">Home</a><a href="Config_FullStoreURLaboutus.asp">About Us</a><a href="Config_FullStoreURLmyaccount.asp">My Account</a><a href="Config_FullStoreURLhelp.asp" class="end">Help</a></div></div></div><div id="headerbg"><div id="header"><!--<div id="display_homepage_title"><a href="Config_FullStoreURL"></a></div>--><a id="logo" href="#"></a> <!-- ======================== SEARCH BOX ======================== --><div id="display_search_wrapper"><div id="display_search"><form action="Config_FullStoreURLSearchResults.asp" method="get" name="SearchBoxForm"><input type="text" value="Search" name="Search" class="txtbox" id="search_box" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/><img src="vspfiles/templates/winter_park/images/template/search_btn.png" border="0" align="top" style="cursor: pointer;" onclick="document.forms['SearchBoxForm'].submit();" alt="Submit"/></form></div></div><div id="topsocial"><a href="https://www.facebook.com/pages/SOS-Boardz/221929231178413"><img src="vspfiles/templates/winter_park/images/template/facebook.png"/></a><a href="https://www.twitter.com/SOSBoardz"><img src="vspfiles/templates/winter_park/images/template/twitter.png"/></a><a href="http://sos-boardz.blogspot.com/"><img src="vspfiles/templates/winter_park/images/template/blogger.png" class="spacer"/></a></div></div><div id="top_nav"> <!-- ======================== UL LAYOUT ======================== --><div id="display_menu_1"></div></div>id<!-- Slider HTML --> <div class="slider-wrapper theme-default "> <div id="slider" class="nivoSlider"> <a href="#"><img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boardz-slide-show-online-store-now-open-image-one.jpg" alt="shop now"></a> <a href="http://dev7studios.com"><img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boards-slide-show-sector-9-Image-two.jpg" alt="shop online" title="#htmlcaption"></a> <a href="#"><img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boardz-slide-show-the-hundreds-image-three.jpg" alt="shop now" title="online store"></a> </div> </div> <!-- Slider HTML --> <!-- ======================== CONTENT ======================== --> Edited June 7, 2013 by Rockstar29 Link to comment Share on other sites More sharing options...
Rockstar29 Posted June 7, 2013 Author Share Posted June 7, 2013 (edited) Last Part the chages are marked in `red` <div id="content"><div id="boxtop"></div><table border="0" cellspacing="0" cellpadding="0"><tr><td id="content_area" valign="top"></td></tr></table><div id="boxbottom"></div><div class="clear"></div></div><div id="if_homepage"><div id="bottompromo"><a href="#"><img src="http://i2.photobucket.com/albums/y12/1cavy/SHOPNOWFOOTERIMAGE_zps11ffc91b.jpg" border="0" alt=" photo SHOPNOWFOOTERIMAGE_zps11ffc91b.jpg"/></a><a href="http://www.sos-boardz.com/category_s/1999.htm"><img src="http://i2.photobucket.com/albums/y12/1cavy/LRGFOOTER_zps2dd255f8.jpg" style="margin:0 9px;" alt=" photo LRGFOOTER_zps2dd255f8.jpg"/></a><a href="http://www.sos-boardz.com/category_s/1998.htm"><img src="http://i2.photobucket.com/albums/y12/1cavy/thehundreds_zpsbfbda466.jpg" border="0" alt=" photo thehundreds_zpsbfbda466.jpg"/></a> </div> </div><!-- ======================== FOOTER ======================== --><div id="footer"> <!DOCTYPE html><html><head><title>RSS Feed Test</title></head><body> <div id="sos_blog"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><script src="http://www.sos-boardz.com/v/vspfiles/images/jquery.zrssfeed.min.js"></script> <script type="text/javascript">$(document).ready(function () {$('#sos_blog').rssfeed('http://www.sos-boardz.blogspot.com/feeds/posts/default', {limit: 1,header: false,date: false,titletag: "h1",linktarget: "_blank",snippet: false});}); </script><style>#sos_blog ul {list-style-type: none;}#sos_blog h1 {text-align: center;} </body></style></html><!-- ======================== Mailing List Section ======================== --> <div id="newslettercontainer"> <div id="newsletterimg"> </div> <div id="eList"> <form name="MailingList" method="post" action="Config_FullStoreURLMailingList_subscribe.asp"> <input id="elist_field" name="emailaddress" type="text" value="Your Email Address" onfocus="if (this.value == 'Your Email Address') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Email Address';}"/> <input name="Submit" type="image" id="elist_btn" value="" src="vspfiles/templates/winter_park/images/template/mail_btn.gif" alt="Submit"/> </form> </div> </div> <div id="footer_top"> <ul style="width:85px;"> </ul> <div id="fontent"> <ul> <li class="title">About Us</li> <li><a href="Config_FullStoreURLaboutus.asp">Company Information</a></li> <li><a href="Config_FullStoreURLArticles.asp?ID=251">Contact Us</a></li> <li><a href="/Articles.asp?ID=250">Shipping & Returns</a></li> <li><a href="Config_FullStoreURLterms_privacy.asp">Privacy Policy</a></li> <li><a href="Config_FullStoreURLterms.asp">Terms & Conditions</a></li> </ul> <ul> <li class="title">My Account</li> <li><a href="Config_FullStoreURLshoppingcart.asp">View Cart</a></li> <li><a href="Config_FullStoreURLmyaccount.asp">Sign-In</a></li> <li><a href="Config_FullStoreURLOrders.asp">Order Status</a></li> <li><a href="Config_FullStoreURLcindex.asp">Category Index</a></li> <li><a href="Config_FullStoreURLpindex.asp">Product Index</a></li> </ul> <ul> <li class="title">Helpful Information</li> <li><a href="Config_FullStoreURLArticles.asp?ID=251">Contact Us</a></li> <li><a href="Config_FullStoreURLhelp.asp">Help</a></li> </ul> <ul> <li class="title2">We Accept</li> <li><img src="vspfiles/templates/winter_park/images/template/visa.gif" alt="visa"/><img src="vspfiles/templates/winter_park/images/template/master.gif" alt="master"/><img src="vspfiles/templates/winter_park/images/template/american.gif" alt="american"/><img src="vspfiles/templates/winter_park/images/template/discover.gif" alt="discover"/><img src="vspfiles/templates/winter_park/images/template/paypal.gif" alt="paypal"/> </li> <li style="margin-top:20px;><a href="javascript:void(0); onclick="window.open('https://www.volusion.com/ssl.asp?url=www.YourDomain.com', 'volusionssl', 'top=10,left=10,menubar=0,resizable=0,scrollbars=0,width=450,height=410')"><img src="vspfiles/templates/winter_park/images/template/vsecure.gif" alt="Volusion Secured"/></a></li> </ul> </div> </div> <div id="footer_bottom"> <p> <a href="/terms.asp">Copyright © <script type="text/javascript">document.write((new Date()).getFullYear());</script> Config_CompanyNameLegal. All Rights Reserved.</a> <!-- =========================================================================================== VOLUSION LINK - BEGIN===============================================================================================Customer has agreed per Volusion's Terms of Service (http://www.volusion....onthtomonth.asp) to maintain a text hyperlink to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion. Removing this link breaches the Volusion agreement. --> Powered by <a href="http://www.volusion.com" title="Shopping Cart Software" target="_blank">Volusion</a>. </p> <!-- =========================================================================================== VOLUSION LINK - END============================================================================================ --> </div> </div> </div></div><!-- ======================== BOOKMARK JS FILE<script src="vspfiles/templates/custom/js/bookmark.js" type="text/javascript"></script> ======================== --><!-- ======================== SHOPPING CART DISPLAY JS FILE<script src="v/vspfiles/templates/custom/js/shopping_cart_summary.js" type="text/javascript"></script><script src="v/vspfiles/templates/custom/js/header_cart_summary.js" type="text/javascript"></script> ======================== --><!-- ======================== REMOVE BREAD CRUMB<script src="vspfiles/templates/custom/js/removebreadcrumb.js" type="text/javascript"></script> ======================== --><!-- ======================== ACTIVE TAB<script src="vspfiles/templates/custom/js/activetab.js" type="text/javascript"></script> ======================== --><!-- ======================== RANDOM IMAGE<script src="vspfiles/templates/custom/js/activetab.js" type="text/javascript"></script> ======================== --><!-- jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <!-- RSS Feed jQuery Plug-in --> <script src="http://www.sos-boardz.com/v/vspfiles/images/jquery.zrssfeed.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#sos_blog').rssfeed('http://www.sos-boardz.blogspot.com/feeds/posts/default', { limit: 1, header: false, date: false, titletag: "h1", linktarget: "_blank", snippet: false }); }); </script> <!-- Nivo Slider jQuery Plug-in --> <script src="http://www.sos-boardz.com/v/vspfiles/nivo-slider/jquery_nivo_slider_pack.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider').nivoSlider({ controlNav: true, // navigation effect: 'random', // transition animSpeed: 500, // transition speed pauseTime: 5000, // time slide will show randomStart: true // start on a random slide }); }); </script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <!-- End jQuery --> </body></html> Edited June 7, 2013 by Rockstar29 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now