Announcement

**NormanRouxel** · 21-Jan-2013, 11:47 AM

Many things need checking:

1) You need the file jquery.nivo.slider.pack.js to be in your Site folder.

2) You'll need some test images. You seem to be trying to use images inside a sub-sub-folder of your Site folder. I.e. images/013-Nivo-slider/Nivo-slider-001.jpg, etc. Much easier to put these images directly in your Site folder and lose the images/013-Nivo-slider/ prefix.

3) SellerDeck needs quotes around filenames in CSS URL's. And having these images in a sub-folder isn't ideal. Put loading.gif into your Site folder and use:

background:url('loading.gif') no-repeat 50% 50%;

For meaningful error messages Preview in Firefox and use its Error Console (hit Control / Shift / J).

**mash** · 21-Jan-2013, 11:56 AM

Thanks for your reply, make changes and will post later with a positive result.

Images in folder just to make it more manageable, tidier if you know what I mean, hence not placing them in the site folder.

Simple change on that front.

Thanks M

**mash** · 22-Jan-2013, 12:02 AM

So I have copied jquery.nivo.slider.pack.js to be in your Site folder and move the image files.

Code:

!!<

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="Nivo-slider-001.jpg" alt="" />
        <img src="Nivo-slider-002.jpg" alt="" />
        <img src="Nivo-slider-003.jpg" alt="" />
        <img src="Nivo-slider-004.jpg" alt="" />
        <img src="Nivo-slider-005.jpg" alt="" />

</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>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

>!!

Results aren't working right - Test site.

Where do you put the following code:

background:url('loading.gif') no-repeat 50% 50%;

.

Thanks M

**NormanRouxel** · 22-Jan-2013, 12:17 AM

Where do you put the following code

Where you wrote "Then it helps to add some CSS..." above.

And you've got a redundant line:

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

which isn't needed as you've put the CSS into the Sellerdeck Stylesheet layout.

**mash** · 22-Jan-2013, 01:14 AM

I have now gone for the external CSS as it was not working very well, now working better, it is not picking up the theme but other than that and of course my exciting examples of images, it is working well.

I am using just the default theme, keep it simple but still not picking up the theme.

I have place various images and css in nivo-slider/themes/default/, still no luck.

As the basic function that looks good.

M

**mash** · 22-Jan-2013, 09:13 PM

With Norman's help, all working now, looking good, I think it is looking good. See the results here:Fragment with hero images

I am using a fragment to deliver the code where I need it, where can I adjust the fragment boarder and shading. I am assuming it is dealt by a CSS so I will have to set up another fragment and pick that in lay up?

Hopefully that is the right track.

Thanks for your help.

M

**mash** · 24-Jan-2013, 11:44 AM

Two questions regarding sliders this week. Someone contacted me directly regarding the Nivo slider asking how I got on and how to do it.

After help from Norman pointing my school boy error out I managed to get it working. So I thought I would do how to do it. Help me to remember for next time!

Download the files from Nivo jQuery Image Slider website.

I went to their support page Nivo support page to pick the bits of code.

Code for the header

Code:

<!-- Nivo slider code <head> section -->
<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>

I wanted it on the brochure page, so in the design window select the correct page add the code

Typical index.html

Code:

<!DOCTYPE HTML>
<html>
<head>
   <title><actinic:variable name="PageTitle" ></title>
	<actinic:variable name="MetaTags" >
   <actinic:variable name="BaseHref" > 
   <actinic:block if="%3cactinic%3avariable%20name%3d%22IsP3PPolicyUsed%22%20%2f%3e"><link rel="P3Pv1" href="<actinic:variable name="P3PFullPolicyLink" >"></actinic:block>
   <link href="actinic.css" rel="stylesheet" type="text/css">
   <link rel="shortcut icon" href="<actinic:variable name="CatalogURL" >/favicon.ico" type="image/x-icon" >
	<actinic:variable name="JavaScriptFunctions" >

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "d9f4a856-82b4-4dd3-b317-9f2ad14882b5"});</script>	

</head>

And code added

Code:

<!DOCTYPE HTML>
<html>
<head>
   <title><actinic:variable name="PageTitle" ></title>
	<actinic:variable name="MetaTags" >
   <actinic:variable name="BaseHref" > 
   <actinic:block if="%3cactinic%3avariable%20name%3d%22IsP3PPolicyUsed%22%20%2f%3e"><link rel="P3Pv1" href="<actinic:variable name="P3PFullPolicyLink" >"></actinic:block>
   <link href="actinic.css" rel="stylesheet" type="text/css">
   <link rel="shortcut icon" href="<actinic:variable name="CatalogURL" >/favicon.ico" type="image/x-icon" >
	<actinic:variable name="JavaScriptFunctions" >

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "d9f4a856-82b4-4dd3-b317-9f2ad14882b5"});</script>	

<!-- Nivo slider code <head> section -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="yourdomain-here/nivo-slider/themes/default/default.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>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
<!-- Nivo slider code <head> section END -->
</head>

I am using their default layout and uploaded a folder with the their style sheet, so you have to say where that is, also if you added it to Sellerdeck CSS you can remove that information. I don't know which is the best way. Also you have to upload nivo-slider.css, in this case I did to the root directory of the website site (again could be added to Sellerdeck). If you upload to different location adjust the code to say where.

Additional files in Sellerdeck (Design > Additional File) will include them in the upload (I think), I just FTP them myself.

You also have to upload the java script files that is jquery.nivo.slider.pack.js to the website.

You do have to make changes to the default.css file to indindicate where the images are located, I opened the file using Notepad, code below:

Code:

/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 1.3
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/

.theme-default .nivoSlider {
	position:relative;
	background:#fff url('http://your domain here/nivo-slider/themes/default/loading.gif') no-repeat 50% 50%;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.theme-default .nivoSlider a {
	border:0;
	display:block;
}

.theme-default .nivo-controlNav {
	text-align: center;
	padding: 20px 0;
}
.theme-default .nivo-controlNav a {
	display:inline-block;
	width:22px;
	height:22px;
	background:url(http://your domain here/nivo-slider/themes/default/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(http://your domain here/nivo-slider/themes/default/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
	opacity: 0;
	-webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
.theme-default a.nivo-prevNav {
	left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
	width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
	width: auto;
	height: auto;
	background: none;
	margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
	display: block;
	width: 120px;
	height: auto;
}

So now to place the slider in your website, I took their code:

Code:

<!-- Then somewhere in the <body> section -->
<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="images/slide1.jpg" alt="" />
        <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
        <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
        <img src="images/slide4.jpg" alt="" />
    </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>

And place it within a fragment selecting text only in the layout.

Code:

!!<
<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        <a href="your url link here"><img src="Nivo-slider-001.jpg" alt="Tray shop" alt="" title="Caption here"/></a>
        <img src="Nivo-slider-002.jpg" alt="" title="Caption here"/>
       <img src="Nivo-slider-003.jpg" alt="" />
        <a href="your link here/"><img src="Nivo-slider-004.jpg" alt="" title="Caption here"/></a>
        <img src="Nivo-slider-005.jpg" alt="" />

</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>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

>!!

As you can see using the default theme to the slider I had to change their standard code from

Code:

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

To

Code:

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">

Also you have to indicate where the image files are going to be located, in this case it will be the root directory and you can add alt text and URL to each image.

I have set it up for 5 images, Nivo-slider-001 to Nivo-slider-005, create your images and name them (again you could use additional files to upload them to the site or ftp them). Two have URL associated with them at the mo (Nivo-slider-001 and Nivo-slider-004).

If you add title to the code it will add a caption to the image, basic slide image code URL link:

Code:

<a href="your url link here"><img src="Nivo-slider-001.jpg" alt="Tray shop" alt="alt text here" /></a>

And one with a caption

Code:

<a href="your url link here"><img src="Nivo-slider-001.jpg" alt="Tray shop" alt="alt text here" title="Caption here"/></a>

I think that is all, it wasn't rocket science, you can see the result here: www.delfland.co.uk/.

Thank you Norman for setting me on the right road.

Umm, possible I missed a step and no doubt someone will point something missing.

You could easily set up variable in Sellerdeck to control some of the above (url link, alt text and title for the caption, also file name too). I have done that in the past and it worked well with another image header.

I was pleased with it. Just need to adjust the speed (have not found that setting yet) and I would like to remove the fragment style for this fragment so there aren't any boarders (I have not found that and assuming it will be a CSS styling issue).

Thanks M

Announcement

Nivo slider and hero images

Nivo slider and hero images

Comment

Comment

Comment

Comment

Comment

Comment

Comment