Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
Like Tree2Likes

Thread: need help finising my image slider project please

  1. #1
    Junior Member
    Join Date
    Jun 2013
    Posts
    9
    Member #
    36474

    need help finising my image slider project please

    Hi

    I will try and explain everything in detail as much as possible,I'm trying to complete my Image slider for my eCommerce store I started almost 1 month ago. I have sign up to almost every Graphic design help forum I can find with hopes of help. I was highly recommend to this one with getting help.

    A great member from the HTML forums helped me get to this stage with my code

    The project was a Image slider&blog fe
    ature

    I'm using the Nivo slider

    Nivo Slider - The world's most awesome jQuery & WordPress Image Slider

    Problem

    1,Did I insert all my code correctly into the three parts?

    2,Why does my slider up-size all the images 3x from there original size?

    3,just want to make sure everything is correct

    Here's my url www.sos-boardz.com

    None of the edited code is live on my site

    Here's my Nivo Slider code

    HTML Code:
    [HTML<!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>
     
    </head>
     
    <body>
     
     
            <div class="slider-wrapper theme-default ">
                    <div id="slider" class="nivoSlider">
                            <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 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>
                            <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">
                    </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>
    Mark in "RED" is where I placed all my 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">
    <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 HERE
    DO NOT ADD YOUR OWN META TAGS
    ONLY 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_park
    Designer: Yuri
    Coder: 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>[/CODE]
    [CODE]
    <!-- ======================== 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 ======================== -->
    Last edited by KG29; Jun 15th, 2013 at 08:26 PM.

  2.  

  3. #2
    Junior Member
    Join Date
    Jun 2013
    Posts
    9
    Member #
    36474
    HTML Code:
    <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>
    HTML Code:
    [CODE] <!-- =========================================================================================== 
                    VOLUSION LINK - BEGIN 
    =============================================================================================== 
    Customer has agreed per Volusion's Terms of Service   (http://www.volusion.com/agreement_monthtomonth.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: false, // 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>
    Since my site is not live with the Slider Feature added,Here's a screen shot of my site doing a preview in Dreamweaver CS6.

    Last edited by KG29; Jun 15th, 2013 at 06:46 PM.

  4. #3
    Junior Member
    Join Date
    Jun 2013
    Posts
    9
    Member #
    36474
    Having a issue marking everything in red when doing my edit it works but after saving nothing shows???

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Put the page up somewhere and let's see what's up. If you want, save it as a static HTML page and give us that link, so your live site isn't messed up.

    On the surface, I'd say it's because you're invoking Nivo Slider twice.
    Code:
     <script type="text/javascript"> <!--- first call //-->        $(document).ready(function(){
                $('#slider').nivoSlider({
                    controlNav: false, // 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"> <!-- second call //-->
            $(window).load(function() {
                $('#slider').nivoSlider();
            });
        </script>
    You should probably get rid of the second one.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Jun 2013
    Posts
    9
    Member #
    36474
    Quote Originally Posted by TheGAME1264 View Post
    Put the page up somewhere and let's see what's up. If you want, save it as a static HTML page and give us that link, so your live site isn't messed up.

    On the surface, I'd say it's because you're invoking Nivo Slider twice.
    Code:
     <script type="text/javascript"> <!--- first call //-->        $(document).ready(function(){
                $('#slider').nivoSlider({
                    controlNav: false, // 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"> <!-- second call //-->
            $(window).load(function() {
                $('#slider').nivoSlider();
            });
        </script>
    You should probably get rid of the second one.
    Hi

    Could you please point me into the right direction on site/write up about making a Static HTML page

    How do you use

    Create a new Fiddle - jsFiddle

    Also Please don't be insulted,but prior to posting here I made a topic asking for help on another forum to better my odds and get tidbits from everywhere

    Here is my code in "red"

    Please help me finish these features

    thank you

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Why would I be offended? I'm only a mod. I don't own this place.

    Basically, all you do is take the page that you've created, save it as an HTML file in your browser, and upload it to your sos-boardz server under any filename that isn't your default folder. Call it nivo-slider.html or something. Then, share the link.
    KG29 likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Junior Member
    Join Date
    Jun 2013
    Posts
    9
    Member #
    36474
    Quote Originally Posted by TheGAME1264 View Post
    Why would I be offended? I'm only a mod. I don't own this place.

    Basically, all you do is take the page that you've created, save it as an HTML file in your browser, and upload it to your sos-boardz server under any filename that isn't your default folder. Call it nivo-slider.html or something. Then, share the link.
    Hope this works (it's crazy how it up-sizes everything) Also if you do a spit screen window with windows 7 it scales just fine.

    I can get the original image sizes that I made


    sos-slider

    Slider code added into my site code(my categories don't display or featured products?

    sos-slider

    thanks in advance for the help
    Last edited by KG29; Jun 15th, 2013 at 10:50 PM.

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Ahhh okay. It's because Nivo Slider is taking advantage of a property that works with most CSS2 browsers (IE being the lone exception) and all CSS3 browsers, in that the image itself is set within CSS to be 100% of the slider width.

    You can either give your slider or your images a fixed width in your CSS and that should solve it. I'd go with the slider.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Junior Member
    Join Date
    Jun 2013
    Posts
    9
    Member #
    36474
    Quote Originally Posted by TheGAME1264 View Post
    Ahhh okay. It's because Nivo Slider is taking advantage of a property that works with most CSS2 browsers (IE being the lone exception) and all CSS3 browsers, in that the image itself is set within CSS to be 100% of the slider width.

    You can either give your slider or your images a fixed width in your CSS and that should solve it. I'd go with the slider.
    Well that's great to hear

    can you please tell me how to write the code for fixing the slider size,still very new to HTML

    Also what was the issue with my featured products not displaying or categories? Was that because the slider is taking over

    thanks

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It's in your CSS. Add this line to your .theme-default .nivoSlider class.

    width: 850px /* or however wide your images are */

    That may also explain the featured categories deal, although I'd have to see how it all played out together to be sure.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

finisiling web work

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com