collapse

* Simple Portal Archived Forum

This is an Archive Forum.

The content in this forum may be out-of-date or have been superseded by newer information, and links in forum pages to other sites may not work.
This forum contains archives for future reference.

Visit our thread at Simple Machines Forum for current support.

SMF 2.1 users: EhPortal is a ported version of Simple Portal specifically designed for the SMF 2.1 branch.
Please visit web-develop.ca to download EhPortal and for its support.

* User Info

 
 
Welcome, Guest. Please login or register.

* Who's Online

  • Dot Guests: 419
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • {OCS}MasterSeal: Yup, Still adore SP
    April 21, 2019, 07:08:06 PM
  • {OCS}MasterSeal: STILL love SP :)
    November 24, 2018, 05:05:50 AM
  • ♦ Ninja ZX-10RR ♦: <3 aegersz
    September 13, 2018, 03:36:09 PM
  • aegersz: I STILL <3 LOVE SimplePortal
    September 13, 2018, 07:11:39 AM
  • 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

* Recent Posts

Adding Forums Button to Nav bar by jirapon
[August 01, 2019, 09:07:12 AM]


Re: Board Icons by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 04:03:41 PM]


MOVED: Czech translation???? by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 03:04:51 PM]


Board Icons by jirapon
[July 30, 2019, 07:28:44 AM]


Re: Thankyou Simpleportal, by ♦ Ninja ZX-10RR ♦
[July 29, 2019, 09:41:29 AM]

NEED HELP? If you're looking for support with Simple Portal, look no further than the Support Board!

Author Topic: Nivo-Slider  (Read 6678 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: 1193
  • 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: 1193
  • 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: 1193
  • 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: 1193
  • 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