Jquery for Banners

[SamX]

Well i see some are interested in make some transitions for banners and this is the solucion. I hope you like



Well get started.

1° Download this files of one server

Code: Select all

http://www.megaupload.com/?d=XC4OKG7R
https://rapidshare.com/files/3671938898/jslider4ISC.zip

2°Extract the files where you want.

3° Upload the files to site/javascript/slider/ (slider and images are new folders you need to create)

• jquery.min.js
  jquery.slider.min.js
  jquery.slider.css
  jquery.slider.ie6.css
  images/jquery-slider-theme.png

4° Open site/templates/_master/Panels/HTMLHead.html

5° Put the next code under

Code: Select all

	<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/iselector.js?%%GLOBAL_JSCacheToken%%"></script>

New Code

Code: Select all

	<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/slider/jquery.min.js?%%GLOBAL_JSCacheToken%%"></script>
	<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/slider/jquery.slider.min.js?%%GLOBAL_JSCacheToken%%"></script>
	<link rel="stylesheet" type="text/css" href="%%GLOBAL_ShopPath%%/javascript/slider/jquery.slider.css" />
	<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="%%GLOBAL_ShopPath%%/javascript/slider/jquery.slider.ie6.css" />

6° Before %%GLOBAL_AdditionalScriptTags%% Put the next script

Code: Select all

  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $(".slider").slideshow({
        width      : 900,
        height     : 325,
        transition : 'square'
      });
    });
  </script>

On the lines width, height and transition you can customize but the transition can made it later too.

Change the size of your banner images. I have 600 of width on my index page.

width : 600,
height : 325,
transition : 'square'

Once changed save and upload the HTMLHead.html file

7° Go to your Admin Panel >> Marketing >> Banner Manager and make new banner

8° Write the name of the banner and with image manager upload your banner images, you can find some on the folder demo images what you download before.

9° Once uploaded your images click on the icon HTML and write this code:

Code: Select all

<div class="slider">
<div><img src="http://www.site.com/product_images/uploaded_images/banner1.jpg" alt="" /></div>
<div class="jquery-slider-trans-exploderandom"><img src="http://www.site.com/product_images/uploaded_images/banner2.jpg" alt="" /></div>
<div class="jquery-slider-squareRandom"><img src="http://www.site.com/product_images/uploaded_images/banner3.jpg" alt="" /></div>
</div>

I made 3 transitions but if you leave <div> without class the transition will be square that was write on HTMLHead.html before.

Code: Select all

  <script type="text/javascript">
    jQuery(document).ready(function($) {
      $(".slider").slideshow({
        width      : 900,
        height     : 325,
        transition : 'square'
      });
    });
  </script>

Can change the transitions for this:

transition : ['barLeft', 'barRight']
transition : 'squareRandom'
transition : 'explode'
transition : 'square'
transition : ['slideLeft', 'slideRight', 'slideTop', 'slideBottom']

10° Save the banner and watch working it

Here is another configurations:

<div class="slider">

<div>
<div class="caption">
<h4>First Slide</h4>
</div>
<img src="slide_6.jpg" alt=""/>
</div>

<div>
<div class="caption">

<h4>Second Slide</h4>
</div>
<img src="assets/slide_9.jpg" alt=""/>
</div>

Code: Select all

jQuery(document).ready(function($) {
  $(".slider").slideshow({
    width      : 900,
    height     : 325,
    pauseOnHover : false,
    transition : ['slideLeft', 'slideRight', 'slideTop', 'slideBottom']
  });
  
  $(".caption").fadeIn(500);
  
  // playing with events:
  
  $(".slider").bind("sliderChange", function(event, curSlide) {
    $(curSlide).children(".caption").hide();
  });
  
  $(".slider").bind("sliderTransitionFinishes", function(event, curSlide) {
    $(curSlide).children(".caption").fadeIn(500);
  });
});

WITH HTML CONTENT

<div class="slider">

<div>
<div style="background:url(html_1.jpg) no-repeat left top; width:900px; height:360px;">
<div style="padding:112px 0 30px 0; text-align:center;">
<h1 class="cs3">HTML CONTENT</h1>
<h3 class="cs3">Highlight me...I'm CSS3 font-face text.</h3>
</div>
</div>
</div>

<div>
<div class="slider-movie-example">
<h4>Pirates of the Caribbean: On Stranger Tides</h4>
<br/>
<p>Captain Jack Sparrow (Depp) crosses paths with a woman from his past (Cruz)... </p>
<p><a href="http://www.imdb.com/title/tt1298650/" class="button">View</a></p>
</div>
<img src="html_4.jpg" alt=""/>
</div>

<div>
<a href="html_3.jpg" class="lightbox"><img src="html_2.jpg" alt="" /></a>
</div>

</div>

WITH CSS

Code: Select all

h1.cs3,
h3.cs3
{
  margin:0 0 8px;
  text-decoration:none;
  border:0;
  padding:0;
  font-family: 'Bangers', arial, serif;
  color:#FFFFFF;
  text-shadow:2px 2px 1px #222222;
}

h1.cs3
{
  font-size:80px;
  line-height:60px;
}

h3.cs3
{
  font-size:27px;
}

.slider-movie-example
{
  width:300px;
  height:100%;
  background:rgba(0,0,0,0.8);
  color:#FFFFFF;
  padding:10px;
  position:absolute;
  top:0;
  left:20px;
}

JAVASCRIPT

Code: Select all

jQuery(document).ready(function($) {

  $(".slider").slideshow({
    width      : 900,
    height     : 360,
    transition : 'squareRandom'
  });

  $('.lightbox').lightbox();
  
});

Enjoy it!

[mipra]

as usual...brilliant...

by the way, one more question, how to get the number of the slideshow as seen in your screenshot on the top of this thread? I have it working on my website and it works wonderfully. Now, I just need to know how to get the numbers on...

[mipra]

as usual...brilliant...

by the way, one more question, how to get the number of the slideshow as seen in your screenshot on the top of this thread? I have it working on my website and it works wonderfully. Now, I just need to know how to get the numbers on...

Anybody can help me with this?
by the way, I can see that there is a thumb link somewhere underneath the slides..however, the numbers are just gone.
I believe this is only CSS problem.

[mipra]

[Roydekker]

Looking for some additional Interspire Shopping Cart modules? We have made a Jquery Banner Slider for Interspire webstores.
Download it here: http://shoppingcart.mashmedia.nl/en/pro ... 6.1.1.html

Example Jquery Banner:
http://www.huisinleerdam.nl/

[ashlomas]

Hi, thanks for this! It works great in Firefox etc. However it completely crashes and wont load my site in Internet Explorer? my testing URL is http:// usl-internal .com/newcart/

I have followed your steps exactly and like I said works fine in other browsers? Any ideas PLEASE : ) I will donate if you can assist me to get this working.

[netjet]

Hi Guys,

Samx, many thanks for this mod, will it work with isc 5.0.5?
Thanks

[lastman]

Can you upoload those files again, please
rapidshare.com/files/3671938898/jslider4ISC.zip is broken
Thanks

[johnny23]

Hi Guys,

I am also looking for these files can anybody re-upload them please?

Thanks.