Author Topic: Nivo Slider  (Read 4792 times)

Offline agent47

  • Support Team
  • Hero Member
  • *
  • Posts: 817
  • At your service?
    • Superhero Alliance
Re: Nivo Slider
« Reply #10 on: Jul 20, 2012, 15:11:03 »
:cheers:

Just a tip: If you use Firefox, then download the Web Developer add-on for Firefox. It makes making CSS changes a breeze. ;)

Wedge is the way to go

Offline ewind

  • Full Member
  • ***
  • Posts: 195
    • BDM Webs
Re: Nivo Slider
« Reply #11 on: Jul 20, 2012, 17:11:01 »
Been using it for some time now :) and your right it's very nice tool. The inspect elements also works well. 
One must remain twisted to keep a valid perspective on those around him.
That's why dogs look at you sideways.

Customizing SMF Themes

Offline zapiy

  • Full Member
  • ***
  • Posts: 149
    • Email
Re: Nivo Slider
« Reply #12 on: Jul 23, 2012, 11:43:14 »
wow nice one guys

What bit do i remove from the css though?

cheers

Offline agent47

  • Support Team
  • Hero Member
  • *
  • Posts: 817
  • At your service?
    • Superhero Alliance
Re: Nivo Slider
« Reply #13 on: Jul 23, 2012, 15:50:51 »
Maybe ewind can help you with that. ;)

Wedge is the way to go

Offline ewind

  • Full Member
  • ***
  • Posts: 195
    • BDM Webs
Re: Nivo Slider
« Reply #14 on: Jul 24, 2012, 09:42:47 »
I used a html block in SP.

Code: [Select]
 
<link rel="stylesheet" href="../nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider/demo/style.css" type="text/css" media="screen" />

  <div id="wrapper">

        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="../nivo-slider/demo/images/toystory.jpg" data-thumb="../nivo-slider/demo/images/toystory.jpg" alt="" />
                <img src="../nivo-slider/demo/images/up.jpg" data-thumb="../nivo-slider/demo/images/up.jpg" alt="" title="" />
                <img src="../nivo-slider/demo/images/walle.jpg" data-thumb="../nivo-slider/demo/images/walle.jpg" alt=""  />
                <img src="../nivo-slider/demo/images/nemo.jpg" data-thumb="../nivo-slider/demo/images/nemo.jpg" alt=""  />
                <img src="../nivo-slider/demo/images/wowpaid.jpg" data-thumb="../nivo-slider/demo/images/wowpaid.jpg" alt=""  />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>

    </div>
    <script type="text/javascript" src="../nivo-slider/demo/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../nivo-slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>


In the nivo-slider/demo/style.css remove everything but the following....


Code: [Select]

/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/



.slider-wrapper {
width: 80%;
margin:20px auto;
}

.theme-default #slider {
    margin:100px auto 0 auto;
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
    margin-top:150px;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}

I didn't use any link or captions so you'll have miss around with that. But this worked for me....

Can see it live on my site (see sig. for link)
« Last Edit: Jul 24, 2012, 09:47:31 by ewind »
One must remain twisted to keep a valid perspective on those around him.
That's why dogs look at you sideways.

Customizing SMF Themes

Offline zapiy

  • Full Member
  • ***
  • Posts: 149
    • Email
Re: Nivo Slider
« Reply #15 on: Jul 24, 2012, 10:42:05 »
I found this version thats much more stripped down.

Trouble is i have a scrollbar that i want to get rid off.

Any advice please?

Code: [Select]
<link rel="stylesheet" href="slideshow/css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="slideshow/css/style.css" type="text/css" media="screen" />


        <div id="slider-wrapper">
            <div id="slider" class="nivoSlider">

<a href="http://www.domain.com"><img src="slideshow/images/1.png" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="images/consoles1/NES.png" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="images/computers/Amstrad.png" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="images/computers/ZX_Spectrum.png" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="images/computers/Atari_1040_st.png" title="Put a caption here."/></a>
            </div>
        </div>
    <script type="text/javascript" src="slideshow/js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="slideshow/js/jquery.nivo.slider.pack.js"></script>
 
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:250, // Slide transition speed
        pauseTime:8000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:false, // Next & Prev navigation
        directionNavHide:false, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        captionOpacity:0, // Universal caption opacity
        keyboardNav:false, // Use left & right arrows
        pauseOnHover:true, // Stop animation while hovering
    });
});
</script>

Offline ewind

  • Full Member
  • ***
  • Posts: 195
    • BDM Webs
Re: Nivo Slider
« Reply #16 on: Jul 24, 2012, 11:34:06 »
Can you post a link, so I can look at it?

One must remain twisted to keep a valid perspective on those around him.
That's why dogs look at you sideways.

Customizing SMF Themes

Offline zapiy

  • Full Member
  • ***
  • Posts: 149
    • Email
Re: Nivo Slider
« Reply #17 on: Jul 24, 2012, 11:53:51 »
http://www.retrovideogamer.co.uk

cheers

The first image is the one we want centered and have no scrollbar.. The other images are just test images.

Offline ewind

  • Full Member
  • ***
  • Posts: 195
    • BDM Webs
Re: Nivo Slider
« Reply #18 on: Jul 24, 2012, 14:29:48 »
Uhmm not really sure, the image is not bigger than the height you set. what happens if you change the theme wrapper? giving it a little space.
http://www.retrovideogamer.co.uk

cheers

The first image is the one we want centered and have no scrollbar.. The other images are just test images.


 
Code: [Select]
/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
width: 990px;
margin: 0 auto;
}
 

Change it and see if that fix's it.
One must remain twisted to keep a valid perspective on those around him.
That's why dogs look at you sideways.

Customizing SMF Themes

Offline zapiy

  • Full Member
  • ***
  • Posts: 149
    • Email
Re: Nivo Slider
« Reply #19 on: Jul 25, 2012, 09:29:07 »
Cheers

Thing is i don't really want to change the theme width.