collapse collapse

* User Info

 
 
Welcome, Guest. Please login or register.
Did you miss your activation email?

* Who's Online

  • Dot Guests: 111
  • Dot Hidden: 0
  • Dot Users: 1
  • Dot Users Online:

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM
  • phantomm: and from what I see only patch is broken, full install package is fine
    October 21, 2016, 03:44:44 PM
  • phantomm: they say it for over 3 weeks now..
    October 21, 2016, 03:43:52 PM
  • aegersz: SMF say that bug fix 2.0.13 is coming soon ...
    October 19, 2016, 06:46:12 PM

* Recent Posts

Welcome to SimplePortal.net! You can download SimplePortal from the Downloads Area!

Author Topic: Nivo-Slider  (Read 2730 times)

0 Members and 1 Guest are viewing this topic.

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Nivo-Slider
« 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;
}
« Last Edit: March 17, 2016, 08:06:00 PM by ♦ Ninja ZX-10RR ♦ »

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1155
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Nivo-Slider
« Reply #1 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. ;)
« Last Edit: March 17, 2016, 07:30:00 PM by ♦ Ninja ZX-10RR ♦ »
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1155
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Nivo-Slider
« Reply #2 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 @_@
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Nivo-Slider
« Reply #3 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>
« Last Edit: March 17, 2016, 08:06:26 PM by ♦ Ninja ZX-10RR ♦ »

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1155
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Nivo-Slider
« Reply #4 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 ;)
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Nivo-Slider
« Reply #5 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
« Last Edit: March 17, 2016, 08:36:33 PM by swoodie »

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1155
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Nivo-Slider
« Reply #6 on: March 17, 2016, 10:04:04 PM »
Cool :)
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis