Using a different Slider on Home Page

Hi

I would like to use a different slider on the home page (unite revolution slider) to replace the GK Image Slider but I would still like to retain the shop tab front featured items that sit over the existing slider and also the masked fader overlay that you have on the GK Image slider.

Are you able to advise on what code I need to adjust to get this to work please?

Many thanks

It would probably need few css tweaks. If you have already replaced your slider then please post a link where we can see so we can make suggestions as we don't have access to this slider to test.

See you around...

It would probably need few css tweaks. If you have already replaced your slider then please post a link where we can see so we can make suggestions as we don't have access to this slider to test.

See you around...

Hi

I managed to work it out using .css

Thanks

No problem at all, see you around...

I use this topic to ask a question about using a different slider. I am interested in implementing this slider:
demo--> http://iprodev.com/iview/ because I'm absolutely interested in the features it has to offer.
We have the instructions to implement it on our website detailed here:

Insert in the head section of the page

Code: Select all

<link rel="stylesheet" href="iview.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="raphael-min.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="iview.packed.js" type="text/javascript"></script>

where into the storebox template should I insert the scripts?

then "insert into body section the slide or slides":

Code: Select all

<div id="iview">
    <!-- Slide 1 -->
    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>
    <!-- Slide 2 -->
    <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div>
</div>

we can add a caption to the slides with a div class:

Code: Select all

<div id="iview">
    <!-- Slide 1 -->
    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">
        <!-- Caption -->
        <div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
    </div>
    <!-- Slide 2 -->
    <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg">
        <!-- Caption -->
        <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
    </div>
</div>

"By adding one more html5 data-attribute to the "iview-caption" div you can decide the effect of the caption. The possible effects are: "wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade".

<div class="iview-caption" data-transition="fade">Caption description</div>

A caption can have a data-transition "fade", in this case it will be displayed with a fading effect".

This slider is awesome, isn't it?

I've been searching into storebox the place to insert the slider and position it on maintop position with the module position(like I have now in my slider http://tiendanueva.negre.es/ )

Any help is truly welcome!

Kind Regards,

@yoligrana,

Following is what you need to do.

1. Prepare required files.

A. Copy "iview.css" to templates/gk_storebox/css/iview.css
B. Copy following files to js folder templates/gk_storebox/js/*

Code: Select all

raphael-min.js
jquery.easing.js
iview.packed.js


C. Add slider css file.
Open file: /templates/gk_storebox/layouts/blocks/head.php
Around line 24 after below code

Code: Select all

$this->API->addCSS('media/system/css/modal.css');


Add required css which is below

Code: Select all

$this->API->addCSS($this->API->URLtemplate() . '/css/iview.css');


D. Add slider js files.
In head.php look for line 77 which is below

Code: Select all

$this->API->addJS($this->API->URLtemplate() . '/js/gk.menu.js');


Add following lines after above code

Code: Select all

$this->API->addJS($this->API->URLtemplate() . '/js/raphael-min.js');
$this->API->addJS($this->API->URLtemplate() . '/js/jquery.easing.js');
$this->API->addJS($this->API->URLtemplate() . '/js/iview.packed.js');


So now all required files included in template to load.

If you are only required to add html markup for slider to work then simply create a new custom html module and add your html as they have suggested.

See you around...

Thank you Norman
once the required files are uploaded and included on our template,
how to insert the html slider to work and the javascript files?
The slider pack when downloaded includes (apart of the css,images and js files) a html file with the code to show it. There are different type of sliders. I'm interested in the default one which is called index.html.
Should I include the content of this html inside a html custom module?
what about the javascript at the bottom it includes?

Th index.html of the slider I want:

Code: Select all

<!DOCTYPE html>
<html>
   <head>
      <title>iView&trade; v2.0</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <link rel="stylesheet" href="css/styles.css" />
      <link rel="stylesheet" href="css/iview.css" />
      <link rel="stylesheet" href="css/skin 1/style.css" />
      <script src="js/jquery-1.7.1.min.js"></script>
      <script type="text/javascript" src="js/raphael-min.js"></script>
      <script type="text/javascript" src="js/jquery.easing.js"></script>

      <script src="js/iview.js"></script>
      <script>
         $(document).ready(function(){
            $('#iview').iView({
               pauseTime: 7000,
               directionNav: false,
               controlNav: true,
               tooltipY: -15
            });
         });
      </script>

   </head>

   <body>
<div id="cont">
      <div id="header">
         <div class="container">
            <h1><a href="<?=$siteurl?>">iView&trade;</a></h1>
     
            <div id="nav">
               <ul>
                  <li class="active"><a href="index.html">Regular</a></li>
                  <li><a href="index2.html">Multiple</a></li>
                  <li><a href="index3.html">Regular with API</a></li>
                  <li><a href="index4.html">Responsive</a></li>
                  <li><a href="index5.html">Banner</a></li>
               </ul>
            </div>
         </div>
      </div>

   <div class="container">
      <div id="iview">
         <div data-iview:image="photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
            <div class="iview-caption caption1" data-x="80" data-y="200">iView<sup>&trade;</sup></div>
            <div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">The world's most awesome jQuery Image & Content Slider</div>
            <div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"><i>Presented by <b>Hemn Chawroka</b></i></div>
         </div>

         <div data-iview:image="photos/photo2.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
            <div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown">Captions can be positioned and resized freely</div>
            <div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"><a href="#">Example URL-link</a></div>
         </div>

         <div data-iview:image="photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
            <iframe src="http://player.vimeo.com/video/11475955?byline=1&amp;portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
            <div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight">Video</div>
            <div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft">Support</div>
         </div>

         <div data-iview:image="photos/photo3.jpg">
            <div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">Some of iView's Options:</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">Touch swipe for iOS and Android devices</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic">Image And Thumbs Fully Resizable</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic">Customizable Transition Effect</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic">Freely Positionable and Stylable Captions</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic">Cross Browser Compatibility!</div>
         </div>

         <div data-iview:image="photos/photo4.jpg">
            <div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
         </div>

         <div data-iview:image="photos/photo5.jpg">
            <div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">What are you waiting for?</div>
            <div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">Get it Now!</div>
         </div>
      </div>
   </div>

   <div class="copy">Made by <a href="http://iprodev.com/">Hemn Chawroka</a>.<br>Copyright &copy 2012. All rights reserved.</div>
</div>

<div id="background-image">
   <img src="img/bckg.jpg" width="1820" height="1024" />
</div>
<script type="text/javascript" src="js/jquery.fullscreen.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
      $("#background-image").fullscreenBackground();
   });
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-30854466-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
   </body>
</html>

I am a bit confused about it...

Thank you in advance, you gavick rule!

Following js code add it to end of file:/templates/gk_storebox/js/gk.scripts.js

Code: Select all

         jQuery(document).ready(function(){
            jQuery('#iview').iView({
               pauseTime: 7000,
               directionNav: false,
               controlNav: true,
               tooltipY: -15
            });
         });


Following html part add it in custom html module. Simly go to code view and copy & paste.

Code: Select all

<div id="iview">
         <div data-iview:image="photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
            <div class="iview-caption caption1" data-x="80" data-y="200">iView<sup>&trade;</sup></div>
            <div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">The world's most awesome jQuery Image & Content Slider</div>
            <div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"><i>Presented by <b>Hemn Chawroka</b></i></div>
         </div>

         <div data-iview:image="photos/photo2.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
            <div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown">Captions can be positioned and resized freely</div>
            <div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"><a href="#">Example URL-link</a></div>
         </div>

         <div data-iview:image="photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
            <iframe src="http://player.vimeo.com/video/11475955?byline=1&amp;portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
            <div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight">Video</div>
            <div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft">Support</div>
         </div>

         <div data-iview:image="photos/photo3.jpg">
            <div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">Some of iView's Options:</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">Touch swipe for iOS and Android devices</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic">Image And Thumbs Fully Resizable</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic">Customizable Transition Effect</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic">Freely Positionable and Stylable Captions</div>
            <div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic">Cross Browser Compatibility!</div>
         </div>

         <div data-iview:image="photos/photo4.jpg">
            <div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
         </div>

         <div data-iview:image="photos/photo5.jpg">
            <div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">What are you waiting for?</div>
            <div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">Get it Now!</div>
         </div>
</div>


You need to make sure images are uploaded in correct folders. See urls suchs as "photos/photo5.jpg".

See you around...

Awesome Norman, thanks a lot for your support and tips! I will try it!

See you around,

Kind Regards,

No problem at all, see you around...