Thread: Flash Banner

Page 1 of 10 123 ... LastLast
Results 1 to 10 of 100
  1. #1
    Join Date
    May 2010
    Posts
    21
    Plugin Contributions
    0

    Default Flash Banner

    Hi all,

    Can someone please give me a full tutorial on how to create a flash banner

    I have got the images i need ready.

    Thanks
    Last edited by Kim; 9 Feb 2011 at 10:33 PM.

  2. #2
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,101
    Plugin Contributions
    5

    Default Re: Flash Banner

    How about one like THIS? Would that do you?
    Let me know, as there's a little confusion on what goes where, and what to do with the script files. But I can walk you through it step by step, if you need.
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  3. #3
    Join Date
    May 2010
    Posts
    21
    Plugin Contributions
    0

    Default Re: Flash Banner

    if there is a way i could remove the annotations from the 2nd example, then that would be great.

  4. #4
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,101
    Plugin Contributions
    5

    Default Re: Flash Banner

    Quote Originally Posted by seunthegreat View Post
    if there is a way i could remove the annotations from the 2nd example, then that would be great.
    Sure, you can do that.

    Steps:


    1. Have your images ready.
    2. Download Full version (with examples) (size: 574kb)
    3. Copy both jscrip files into your "includes/templates/YOUR_CUSTOM_TEMPLATE/jscrip/ (If you don't have a folder called jscript in your custom template's folders......create it.
    4. Rename both jscript files to include this prefix: jscript_ , so they look like this: jscript_jquery.js and jscript_s3Slider.js
    5. Copy the HTML code to your main page in Admin>Tools>Define Pages Editor
    6. Edit the HTML to include your images, and locations.
    7. Insert the CSS into your "includes/templates/YOUR_CUSTOM_TEMPLATE/css/stylesheet.css (putting it at the very bottom is fine). Edit the 2 sections that has "width: 400px;" to match the width of your images. NOTE: Your images need to be the same size!!!!
    8. Edit the CSS to the width of your images.
    9. Copy & paste this into the top of your "jscript_s3Slider.js":
      Code:
      $(document).ready(function() { 
                             $('#s3slider').s3Slider({ 
                                    timeOut: 4000 
                             });
                      });
    10. Edit that section (above) to make your images slower or faster. Default, as you can see is set to 4000ms. Lower number=faster change. Higher number=slower change.
    11. To get rid of the text section, that you didn't want.........go to your css and delete this section:

    Code:
    .s3sliderImage span  {
                           position: absolute; /* important */
                           left: 0;
                           font: 10px/15px Arial, Helvetica, sans-serif;
                           padding: 10px 13px;
                           width: 374px;
                           background-color: #000;
                           filter: alpha(opacity=70); /* here you can set  the opacity of box with text */
                           -moz-opacity: 0.7; /* here you can set the  opacity of box with text */
                           -khtml-opacity: 0.7; /* here you can set the  opacity of box with text */
                           opacity: 0.7; /* here you can set the opacity of  box with text */
                           color: #fff;
                           display: none; /* important */
                           top: 0;
    
                           /*
                                  if you put
                                  top: 0;  -> the box with text will be  shown at the top of the image                         
                                  if you put
                                  bottom: 0;  -> the box with text will  be shown at the bottom of the image
                           */
                    }
    Hope this helps.
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  5. #5
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,101
    Plugin Contributions
    5

    Default Re: Flash Banner

    And this section that you see on the s3Slider's page can be ignored, as adding the prifix "jscript_", let's Zen-Cart know to use it, so that part isn't needed.
    Code:
    <script src="js/jquery.js"  type="text/javascript"></script>
    				<script src="js/s3Slider.js"  type="text/javascript"></script>
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  6. #6
    Join Date
    May 2010
    Posts
    21
    Plugin Contributions
    0

    Default Re: Flash Banner

    sorry, im a complete novice to this, what are the 2 jscript files?

  7. #7
    Join Date
    May 2010
    Posts
    21
    Plugin Contributions
    0

    Default Re: Flash Banner

    i have found these, but dont know where to edit in the html file

  8. #8
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,262
    Plugin Contributions
    3

    Default Re: Flash Banner

    Jquery systems are now better than flash... for several reasons... mostly to do with the fact that:

    1. Flash reloads each time the page refreshes (unless you do a bit of nifty code stuff to have it render only on the home page... thereafter it's a static image. The reloading is VERY IRRITATING.

    2. 64-bit browsers cannot read a flash file as (at going to press) adobe has no reliable plugin for 64-bit browsers.

    3. Flash files can be big, slowing your page load times down.

    4. You can do a lot more with Jquery stuff (hyperlinks for example) that are more complicated to achieve in flash.

    I make use of a neat little Jquery SLIDER here, that is easily editable by the site owner, as there are no flash files to build... All he does is change some html hyperlinks and add new images when he wants to direct visitors to a new area.

    In my opinion, there is generally no need for flash on a webshop page UNLESS it actively contributes to the selling process, EG: a small flash movie explaining how a product works may encourage people to buy it.

    Most of the time, flash stuff is an irritating side-show that serves no useful purpose.
    19 years a Zencart User

  9. #9
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,101
    Plugin Contributions
    5

    Default Re: Flash Banner

    Schoolboy............I am VERY surprised at you. You, in every post I've saw by you, ALWAYS do your research before commenting..........but not this time, huh? Besides, if you read all the posts carefully, you would have noticed that. Shame.......shame........:)

    See, the s3Slider IS a jquery plugin.........NOT flash. AND is VERY easily edited in the HTML just changing images, text, and links.

    Just thought you might want to know that for future reference.
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  10. #10
    Join Date
    Apr 2010
    Posts
    43
    Plugin Contributions
    0

    Default Re: Flash Banner

    Thank you very much, Get Em Fast. I found it really helpful. And the result is cool! :-)

    What I'm not sure about is how to change the opacity of the background of annotations? Is it possible to change that opacity to any value between 0% to 100%?

    Many thanks again,
    Ashely

 

 
Page 1 of 10 123 ... LastLast

Similar Threads

  1. v138a Flash banner
    By Stanice2013 in forum General Questions
    Replies: 3
    Last Post: 26 Nov 2013, 11:08 AM
  2. flash flash banner install on Modern Zen [RI07] Template
    By firefly143 in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 18 Mar 2011, 02:25 PM
  3. Flash banner
    By littlehawk in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 23 Oct 2009, 11:11 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR