SimplePortal

Customization => Custom Coding => Topic started by: swoodie on March 17, 2016, 07:04:04 PM

Title: Nivo-Slider
Post by: swoodie on March 17, 2016, 07:04:04 PM
Nivo-slider i used the code from  http://www.jqueryscript.net/slider/nivo-slider.html
Hi could any one help me out with getting this to work  i am trying to get it to display in a  top block in sp html format i can get all pictures slidind action happenning but it's way to big it has pictures on left hand side over page.

my block code

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



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

<img src="nivo-slider/images/toystory.jpg" data-thumb="nivo-slider/images/toystory.jpg" alt="" />


<img src="nivo-slider/images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />

<img src="nivo-slider/images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />

<img src="nivo-slider/images/nemo.jpg" data-thumb="nivo-slider/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>


nivo-slider.css code

Code: [Select]
/*
 * jQuery Nivo Slider v3.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}


style.css[color=red][/color]

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

/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body {
line-height:1;
color:black;
background:white;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
color:#333;
background:#eee;
}

a, a:visited {
color:blue;
text-decoration:none;
}
a:hover, a:active {
color:#000;
text-decoration:none;
}

#dev7link {
    position:absolute;
    top:0;
    left:50px;
    background:url(images/dev7logo.png) no-repeat;
    width:60px;
    height:67px;
    border:0;
    display:block;
    text-indent:-9999px;
}

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

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}
Title: Re: Nivo-Slider
Post by: ♦ Ninja ZX-10RR ♦ on March 17, 2016, 07:27:35 PM
Moved to Custom Coding and formatted. It could be useful to see it live, to fix it, as it's likely a css problem, but I can't quite fix it without seeing it. ;)
Title: Re: Nivo-Slider
Post by: ♦ Ninja ZX-10RR ♦ on March 17, 2016, 07:47:58 PM
Oh, directly from your site
"Failed to load resource: the server responded with a status of 404 (Not Found)" on nivo-slider.css. Did you try to include it into the block or something..? It seems you've done quite a bit of mess there @_@
Title: Re: Nivo-Slider
Post by: swoodie on March 17, 2016, 07:54:31 PM
Moved to Custom Coding and formatted. It could be useful to see it live, to fix it, as it's likely a css problem, but I can't quite fix it without seeing it. ;)

no only thing in block is below   


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



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

<img src="nivo-slider/images/toystory.jpg" data-thumb="nivo-slider/images/toystory.jpg" alt="" />


<img src="nivo-slider/images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />

<img src="nivo-slider/images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />

<img src="nivo-slider/images/nemo.jpg" data-thumb="nivo-slider/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>
Title: Re: Nivo-Slider
Post by: ♦ Ninja ZX-10RR ♦ on March 17, 2016, 08:05:40 PM
Oh I see the split now. Well, it cannot load the css file, because it's probably in the wrong folder or absent, try to change the code (<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" /> in the href part) and make sure the file is there.
P.S.: use code tags, so it's easier to read ;)
Title: Re: Nivo-Slider
Post by: swoodie on March 17, 2016, 08:21:41 PM
ok thank you will give it a try   seems to be working for me now centered in  block
Title: Re: Nivo-Slider
Post by: ♦ Ninja ZX-10RR ♦ on March 17, 2016, 10:04:04 PM
Cool :)
SimplePortal 2.3.8 © 2008-2024, SimplePortal