Announcement

Collapse
No announcement yet.

WOW slider

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    WOW slider

    Hi all

    I am new to sellerdeck and I read somewhere on these forums that WOWslider was a good image slider and easy to integrate.

    The wowslider bit seems fairly straightforward, and I have generated an index.html file from which i can get to the code. But I am struggling to see exactly where I should put the code in order to see it on my homepage.

    I the help file for wow it says:

    WOW Slider generates a special code. You can paste it in any place on your page where you want to add image slider.

    * Export your photo slider using WOW Slider in any test folder on a local drive.
    * Open the generated index.html file in any text editor.
    * Copy all code for WOW Slider from the HEAD and BODY tags and paste it on your page in the HEAD tag and in the place where you want to have a jquery slider (inside the BODY tag).

    <head>
    ...
    <!-- Start WOWSlider.com HEAD section -->
    .....
    <!-- End WOWSlider.com HEAD section -->
    ... </head>
    <body>
    ...
    <!-- Start WOWSlider.com BODY section -->
    .....
    <!-- End WOWSlider.com BODY section -->
    ...</body>

    * You can easily change the style of the templates. Find the generated 'engine/style.css' file and open it in any text editor.


    I am afraid it is this bit where I get stuck. Could someone walk me through steps of where to exactly place the code? Do I assume I use a fragment?

    Thanks in advance!

    Adam

    #2
    I paste the following code jsut before </head> in the outer layer of the layout:

    Code:
    	<!-- Start WOWSlider.com HEAD section -->
                    <link rel="stylesheet" type="text/css" href="http://www.thefavourshop.ie/shop/engine1/style.css" />
                    <script type="text/javascript" src="http://www.thefavourshop.ie/shop/engine1/jquery.js"></script>
          <!-- End WOWSlider.com HEAD section -->

    I then generate an index.html file from WOW and copy the bit that says <!--Start WOWSlider.com BODY section --> all the way to <!-- End WOWSlider.com BODY section -->>!! and paste itinto a fragment (make sure the layout is description only). YOu need to add an extra !!< and >!! to the start of the code and the end to tell sellerdeck that is code and not text (see below)

    Code:
    !!<<!-- Start WOWSlider.com BODY section -->
    	<div id="wowslider-container1">
    	<div class="ws_images"><ul>
    
    you code for yoru slider is all here.
    
    
    
    <!-- Generated by WOWSlider.com v2.5 -->
    	<div class="ws_shadow"></div>
    	</div>
    	<script type="text/javascript" src="engine1/wowslider.js"></script>
    	<script type="text/javascript" src="engine1/script.js"></script>
    	<!-- End WOWSlider.com BODY section -->>!!
    Finally you need to manually upload all the images needed for the slider and possibly files to the same place as all the website images are kept (I Think, im not sure, i just put them everywhere i thought they may go and until it worked). Ill check this part out tonight if I get a chance and let you know.


    Tara

    Comment


      #3
      Originally posted by ton View Post
      I paste the following code jsut before </head> in the outer layer of the layout:

      Code:
      	<!-- Start WOWSlider.com HEAD section -->
                      <link rel="stylesheet" type="text/css" href="http://www.thefavourshop.ie/shop/engine1/style.css" />
                      <script type="text/javascript" src="http://www.thefavourshop.ie/shop/engine1/jquery.js"></script>
            <!-- End WOWSlider.com HEAD section -->

      I then generate an index.html file from WOW and copy the bit that says <!--Start WOWSlider.com BODY section --> all the way to <!-- End WOWSlider.com BODY section -->>!! and paste itinto a fragment (make sure the layout is description only). YOu need to add an extra !!< and >!! to the start of the code and the end to tell sellerdeck that is code and not text (see below)

      Code:
      !!<<!-- Start WOWSlider.com BODY section -->
      	<div id="wowslider-container1">
      	<div class="ws_images"><ul>
      
      you code for yoru slider is all here.
      
      
      
      <!-- Generated by WOWSlider.com v2.5 -->
      	<div class="ws_shadow"></div>
      	</div>
      	<script type="text/javascript" src="engine1/wowslider.js"></script>
      	<script type="text/javascript" src="engine1/script.js"></script>
      	<!-- End WOWSlider.com BODY section -->>!!
      Finally you need to manually upload all the images needed for the slider and possibly files to the same place as all the website images are kept (I Think, im not sure, i just put them everywhere i thought they may go and until it worked). Ill check this part out tonight if I get a chance and let you know.


      Tara
      Hi Tara

      Thank you so much for your reply, I shall give it a go tomorrow and see how I get on. Just one question, when you say ensure the fragment is description only, is that a variable option in the layout panel of fragment? Or do I have to create a new type of variable to cater for that? Sorry if im vague.....

      I think I know what you mean, but I am not in front of the software just now so cannot check!

      Adam

      Comment


        #4
        When you create the new fragment, under layout select Text Only

        Tara

        Comment


          #5
          Hi Tara

          I had to manually create a text only fragment (by removing the variables for Fragment title and image) but my results do not look great!

          http://www.harveymaps.co.uk/acatalog/test/index.html

          Something to do with the css perhaps?

          Adam

          Comment


            #6
            I take it you did a bit more tweeking between when posting and me having a look because it looks perfect to me.

            Tara

            Comment


              #7
              Well...I called the helpline, and yes we got there in the end! we decided against using the fragment option and instead putting the code immediately above the 'Inner Layout' using a block if.

              He was very good! I doubt I would have done that on my own.

              Thanks for all your help, you have a nice website by the way. I sneaked a look!

              Comment

              Working...
              X