Simple Image Slider

[IWL]

Hi,

I'm looking for a simple image slider, I've searched the forums and the web but to no avail.
Something that displays only the images which can be used as links and a discreet navigation tool would be ideal.

I did find this, which would be spot on but after following the tutorial Actinic shows the error: A JavaScript error has been found on the page ('Object doesn't support this property or method')\

Any help would be much appreciated.

[Artisan]

My favourite is WOW Slider - http://www.wowslider.com/ - there's a good choice of styles and it works well in SellerDeck.

Malcolm

[Buzby]

We used Nivo Slider which can be seen here www.titanjewellery.co.uk

[Sean Williams]

Hi Malcolm
just to let you know your homepage layout is broken when viewed with the Opera Browser V11.50, W7.

Sean

[Artisan]

Thanks, Sean, although it looks OK in Opera 12.02 - any chance of a screenshot to office at artinet dot co dot uk please?

[Sean Williams]

Hi Malcolm
sorry, I wasn't paying attention!
It 's not WOWslider on your site, it's Buzby's Nivo Slider.

And relax
Sean

[Artisan]

Are we talking about http://www.artinet.co.uk/? I haven't got a slider on there :-)

You don't mean http://www.titanjewellery.co.uk/ do you?

[Sean Williams]

Yes, sorry Malcolm, that's what I meant - it's the Nivo Slider on Titan Jewellery.

Brain in gear somewhere else this afternoon!
Sean

[IWL]

I'm having another crack at this Nivo Slider and I'm getting the same error despite having put in the code correctly. I'm obviously not doing something right but can't work out what it is, I've added the html as per the tutorial, and have added the image/js/css files via the additional files function but the same error is appearing.

On previewing the page I can see the images one on top of each other. Any ideas where I'm going wrong here?

Cheers,
Sean

[Buzby]

Sean,

I made a new template and called it Nivo Slider, it was basically just a copy of my main homepage.

In my code I have

about line 15

<!-- Nivo Slider Head Start -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- Nivo Slider Head Finish -->

About line 73 before </head>

<!-- nivo start--->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: true, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>

<!-- nivo finish-->

And then this code where you want it to show (with my images and links)

<!-- Nivo Slider Body Start -->
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="Carbon-Fibre-Rings.html"><img src="Mens/Carbon-Fibre-Rings-745.jpg" alt="Men's Carbon Fibre Rings" />
<a href="Zirconia-Ceramic-Rings.html"><img src="Mens/Black-Tungsten-Rings-745.jpg" alt="Men's Black Tungsten Rings" />
<a href="Titanium-Wedding-Rings.html"><img src="Mens/Mens-Titanium-Rings-745.jpg" alt="Men's Titanium Rings" />
<a href="Mens-Titanium-Bracelets.html"><img src="Mens/Titanium-Bracelets-745.jpg" alt="Men's Titanium Bracelets" />
<a href="Titanium-Wedding-Rings.html"><img src="Mens/Titanium-Flat-Wedding-Rings-745.jpg" alt="Titanium Flat Wedding Rings" />
<a href="Tungsten-Rings.html"><img src="Mens/Tungsten-Carbide-Wedding-Rings-745.jpg" alt="Tungsten Carbide Wedding Rings" />
<a href="Tungsten-Rings.html"><img src="Mens/Tungsten-rings-745.jpg" alt="Men's Tungsten Rings" />
<a href="Tungsten-Rings.html"><img src="Mens/Tungsten-Wedding-Rings-745.jpg" alt="Men's Tungsten Wedding Rings" />
<a href="Zirconia-Ceramic-Rings.html"><img src="Mens/Zirconia-Ceramic-Rings-745.jpg" alt="Zirconia Ceramic Wedding Rings" />
</div>
<!--</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> -->
<!-- Nivo Slider Body Finish -->

Hope this helps.

Kind regards

Jason

[IWL]

Hi Jason,

Thanks for your help, I copied your code and replaced the images with my own but unfortunately I'm still getting the error: A JavaScript error has been found on the page ('Object doesn't support this property or method')

It'd be great if when you clicked on an error it gave a brief description of the problem. 'Object doesn't support this property or method' means absolutely nothing to me.

Looks like I'll have to call the support line.

Thanks again,
Sean

Edit: Telephone Support pointed me toward a tutorial which works very well. Not exactly what I was after as it doesn't have controls but good enough.
Tutorial Here for anyone interested.

[Buzby]

Hi Sean,

I get that same error in Sellerdeck, I presume because it won't work within the software but it still works when uploaded.

Kind regards

Jason

[NormanRouxel]

I've has a few requests for an easy to install Nivo Slider add-on so I've written one.

Up to 10 slides with optional captions and links, choice of 4 themes, and all other Nivo configuration settings controllable through the SellerDeck UI. Plus the automatic creation of tiny thumbnail icons if you wish to display such things.

And a few tweaks to the CSS files to deal with SellerDeck quirks.

Can be used globally, or in a Fragment.

Email me for details.

[Artisan]

Looking forward to seeing it!

[Sean Williams]

Rats!
Bought WOWSlider already

Which does work well, btw.