Storefront slider Help

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • SidFeyDesigns
    Mighty Mivite








    • Jan 2012
    • 598
    #1

    Storefront slider Help

    I am trying to implement the slider shown here: http://www.mivamerchant.com/blog/how...refront-slider . I can't even seem to get the demo version of the linked download ( jQuery’s SimpleFader v1.0.0) to work.

    Head code:

    Code:
    <head>
    <title>Storefront | &mvt:store:name;</title>
    <meta name="description" content="Welcome to our storefront.">
    <base href="&mvt:global:basehref;">
    <mvt:item name="head" param="head_tag" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/simplefader-1.0.0.min.js"></script>
</head>
    Here is the code on the content tab of the sfnt page.

    Code:
        <div style="width: 720px; margin: 0px auto;">
        <!-- Id of SimpleFader top div must be "simplefader" //-->
        <div id="simplefader">
            <!-- All Screens must have class "screen" //-->
            <div id="screen1" class="screen" style="background-image: url('images/demo1.jpg');">


            </div>
            <div id="screen2" class="screen" style="background-image: url('images/demo2.jpg');">


            </div>
            <div id="screen3" class="screen" style="background-image: url('images/demo3.jpg');">


            </div>
            
            <!-- Empty div for controls must be "simplefadercontrols" //-->
            <div id="simplefadercontrols"></div>
        </div>
    </div>
    Here is the url were this slider should be showing up:

    Personalized Gold Roses and Anniversary Gifts: Love Is A Rose
    http://www.loveisarose.com/SFNT.html
    Love is a Rose creates personalized gold dipped roses and engraved family trees for anniversary gifts.



    What am i missing here?
    Thanks in advance
    Last edited by SidFeyDesigns; 06-26-13, 01:06 PM.
    Nick Harkins
    www.loveisarose.com
    Tags: css, jquery, slider, storefront
    • SidFeyDesigns
      Mighty Mivite








      • Jan 2012
      • 598
      #2
      Re: Storefront slider Help

      oh and here is the css:

      Code:
      #simplefader {
	position: relative;
	width: 720px;
	height: 200px;
	margin-top: 15px;
	margin-bottom: 30px;
}
#simplefader .screen {
	border: 1px solid #666;
	border-radius: 10px;
	-moz-border-radius: 10px;
	z-index: 10; /* Change this value if you have conflicts with other layers */


	/* Do not change the following values */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}
#simplefader #simplefadercontrols {
	/* Position of controls */
	right: 10px;
	bottom: 10px;
	z-index: 11;
	
	/* Do not change the following values */
	position: absolute;
}
#simplefader #simplefadercontrols a {
	text-align:center;
	color: white;
	text-decoration: none;
	font-size: 11px;
	font-weight: bold;
	margin-right: 4px;


	/* Do not change the following values */
	width:24px;
	height:24px;
	line-height: 24px;
	float:left;
	background-image: url('images/fader-nav.png');
	background-position: 0px 0px;
}
#simplefader #simplefadercontrols a.playresume {
	/* Do not change the following values */
	background-image: url('images/fader-ctrl.png');
}


#simplefader #simplefadercontrols a.fadernavon {
	/* Do not change the following values */
	background-position: 0px -24px;
}
      Nick Harkins
      www.loveisarose.com

        Comment

        • lesliekirk
          Super Moderator











          • Aug 2008
          • 9295
          #3
          Re: Storefront slider Help

          While this may not be it, try changing


          Code:
          <script type="text/rocketscript" data-rocketsrc="js/jquery-1.4.3.min.js"></script> <script type="text/rocketscript" data-rocketsrc="js/simplefader-1.0.0.min.js"></script>
          to

          Code:
          <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="js/simplefader-1.0.0.min.js"></script
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way           (aka Leslie Nord leslienord)
          Email me: [email protected]
          www.lesliekirk.com

          Follow me: X | Facebook | Pinterest

            Comment

            • Dan - Glendale Designs
              Mega Mivite


              • Sep 2006
              • 2904
              #4
              Re: Storefront slider Help

              Look at the actual SimpleFader demo document, and you will see the missing component ;)

                Comment

                • SidFeyDesigns
                  Mighty Mivite








                  • Jan 2012
                  • 598
                  #5
                  Re: Storefront slider Help

                  Thanks for the reply leslie. That code is actually dynamically generated by a cdn service we use called cloudflare. I think i can turn that setting off though and it will keep the cod intact which is the code you suggested. I'm going to try that now.
                  Nick Harkins
                  www.loveisarose.com

                    Comment

                    • SidFeyDesigns
                      Mighty Mivite








                      • Jan 2012
                      • 598
                      #6
                      Re: Storefront slider Help

                      Wow. Thats it dan! I can't believe I missed that! thanks for the help. Now the challenge lies in getting the dynamic content described in the blog.
                      Nick Harkins
                      www.loveisarose.com

                        Comment

                        • lesliekirk
                          Super Moderator











                          • Aug 2008
                          • 9295
                          #7
                          Re: Storefront slider Help

                          I see what's missing - you need to add this:

                          Code:
                          <script type="text/javascript">
    jQuery(document).ready(function() {
        simplefader.intervall = 3000;
        simplefader.fadeintervall = 1000;
        simplefader.screenchooser = true;
        simplefader.playresume = true;
        simplefader.init();
    });
    </script>
                          Leslie Kirk
                          Miva Certified Developer
                          Miva Merchant Specialist since 1997
                          Previously of Webs Your Way                           (aka Leslie Nord leslienord)
                          Email me: [email protected]
                          www.lesliekirk.com

                          Follow me: X | Facebook | Pinterest

                            Comment

                            Previous template Next
                            Working...
                            X