collapse collapse

* User Info

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

* Who's Online

  • Dot Guests: 142
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • ♦ 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
  • 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
Welcome to SimplePortal.net! You can download SimplePortal from the Downloads Area!

Author Topic: Nivo-Slider issue formatting block  (Read 5367 times)

0 Members and 1 Guest are viewing this topic.

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Nivo-Slider issue formatting block
« on: April 08, 2016, 01:40:53 AM »
Hi  can some one help me out with  getting the nivo slider formatted right to fit in a top block i have my pictures at the size of 480x191     most trouble iam having is the css i don't under stand it  i can't get the numbers to be under pictures   or pictures in fill the block

    like in this demo http://dte-project.googlecode.com/svn/trunk/NivoSlider-Examples/demo-1.html

here is my html
Code: [Select]
<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>NivoSlider Demo - Basic</title>
    <link href="css/demo.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>

    <div class="nivoSlider" id="nivoSlider">
      <img src="img/1.jpg" alt="" title="Slider Caption 1">
      <img src="img/2.jpg" alt="" title="Slider Caption 2">
      <img src="img/3.jpg" alt="" title="Slider Caption 3">
      <img src="img/4.jpg" alt="" title="Slider Caption 4">
    </div>

    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery.nivo.slider.min.js"></script>
    <script>
      $(window).load(function() {
        $('#nivoSlider').nivoSlider();
      });
    </script>

  </body>
</html>


and the css i am using

Code: [Select]
/*
 * jQuery Nivo Slider v2.7.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * March 2010
 * Style by Taufik Nurrohman <http://gplus.to/tovic>
 */

#slider-wrapper {
  width:618px;
  margin:30px auto;
  padding:2px;
  background-color:black;
  -webkit-box-shadow:0 1px 5px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 5px rgba(0,0,0,.4);
  box-shadow:0 1px 5px rgba(0,0,0,.4);
}

.nivoSlider {
  position:relative;
  background:white url('loading.gif') no-repeat 50% 50%;
  width:750px; /* Make sure your images are the same size */
  height:250px; /* Make sure your images are the same size */
}

.nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
}

.nivoSlider a {
  border:none;
  display:block;
}

.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:none;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}

/* The slices and boxes in the slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}

.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}

.nivo-caption {
  font:normal bold 12px/normal Arial,Sans-Serif;
  position:absolute;
  left:0;
  bottom:0;
  background-color:black;
  color:white;
  opacity:.8; /* Overridden by `captionOpacity` setting */
  width:100%;
  z-index:8;
}

.nivo-caption a {
  color:white;
  border-bottom:1px dotted white;
}

.nivo-caption a:hover {color:#ffa}

.nivo-caption p {
  padding:8px 10px;
  margin:0;
}

.nivo-html-caption {display:none}
.nivoSlider .nivo-caption a {display:inline}

/* Direction nav styles (e.g. "Next" & "Prev") */
.nivo-directionNav a {
  border:none;
  display:block;
  width:30px;
  height:30px;
  position:absolute;
  top:50%;
  margin-top:-15px;
  z-index:9;
  background:transparent url('arrows.png') no-repeat 0 0;
  text-indent:-9999px;
  cursor:pointer;
}

a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}

a.nivo-prevNav {left:15px}

/* Control nav styles (e.g. 1, 2, 3 ...) */
.nivo-controlNav {
  position:absolute;
  top:1050px;
  right:670px;
}

.nivo-controlNav a {
  font:normal normal 10px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  position:relative;
  z-index:9;
  cursor:pointer;
  background-color:#111;
  width:17px;
  padding:2px 0 3px;
  margin:0 0 0 4px;
  text-align:center;
  display:inline-block;
  *display:inline;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

.nivo-controlNav a.active {background-color:#39f}




Offline Chen Zhen

  • The Underdog
  • Operations Manager
  • *
  • Posts: 1329
  • Gender: Male
  • Kinesis
    • WebDev
  • SMF Version: 2.1
  • EhPortal Version: 1.22
Re: Nivo-Slider issue formatting block
« Reply #1 on: April 08, 2016, 07:58:21 PM »
I never tested anything you posted but I will give you some helpful information.

You can't create HTML blocks with the entire page content.
What's shown between the head tags has to go into the actual head of the entire page/document.
The code to call the jQuery libraries also should be placed in the the actual page head.

You can do this by using a PHP block, calling the $context & settings globals.
Use $context['html_headers'] to put the head content in the page.
The css has to be put into the appropriate file and folder & you need to fix their links to full ones (use default theme dir from global $settings).

Like this...

PHP block:
Code: [Select]
// HTML5
global $settings, $context;

$context['html_headers'] .= '
<link href="' . $settings['default_theme_url'] . '/css/nivo_slider.css" rel="stylesheet">   
<script src="' . $settings['default_theme_url'] . '/scripts/jquery-1.7.2.min.js"></script>
        <script src="' . $settings['default_theme_url'] . '/scripts/jquery.nivo.slider.min.js"></script>';

echo '
    <div class="nivoSlider" id="nivoSlider">
      <img src="img/1.jpg" alt="" title="Slider Caption 1">
      <img src="img/2.jpg" alt="" title="Slider Caption 2">
      <img src="img/3.jpg" alt="" title="Slider Caption 3">
      <img src="img/4.jpg" alt="" title="Slider Caption 4">
    </div>   
    <script>
      $(window).load(function() {
        $("#nivoSlider").nivoSlider();
      });
    </script>';


  • Create a file named: nivo_slider.css and place it in: ../Themes/default/css (containing the needed css content)
  • Download the 2 jQuery files and place them in: ../Themes/default/scripts
  • The jQuery file names should be the same as the script calls for.
  • I am assuming the style.css file is just for the page layout so I omitted it.

Regards.
« Last Edit: April 11, 2016, 08:55:40 AM by Chen Zhen »

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Nivo-Slider issue formatting block
« Reply #2 on: April 09, 2016, 01:03:52 AM »
thank you for that  i will give it a go & see how it turns out  & post back

Offline Chen Zhen

  • The Underdog
  • Operations Manager
  • *
  • Posts: 1329
  • Gender: Male
  • Kinesis
    • WebDev
  • SMF Version: 2.1
  • EhPortal Version: 1.22
Re: Nivo-Slider issue formatting block
« Reply #3 on: April 09, 2016, 02:13:23 AM »
Oops.. I forgot that if you are using the SMF 2.0.X branch then the markup is for XHTML.
This differs a bit from HTML5 whereas you need to close some tags and add the script type.
Shown below...

PHP Block:
Code: [Select]
// XHTML 1.0 Transitional
global $settings, $context;

$context['html_headers'] .= '
<link href="' . $settings['default_theme_url'] . '/css/nivo_slider.css" rel="stylesheet" type="text/css" />
<script src="' . $settings['default_theme_url'] . '/scripts/jquery-1.7.2.min.js"></script>
<script src="' . $settings['default_theme_url'] . '/scripts/jquery.nivo.slider.min.js"></script>';

echo '
<div class="nivoSlider" id="nivoSlider">
<img src="img/1.jpg" alt="" title="Slider Caption 1" />
<img src="img/2.jpg" alt="" title="Slider Caption 2" />
<img src="img/3.jpg" alt="" title="Slider Caption 3" />
<img src="img/4.jpg" alt="" title="Slider Caption 4" />
</div>
<script type="text/javascript">
$(window).load(function() {
$("#nivoSlider").nivoSlider();
});
</script>';
« Last Edit: April 11, 2016, 08:55:15 AM by Chen Zhen »

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Nivo-Slider issue formatting block
« Reply #4 on: April 09, 2016, 06:54:34 PM »
sorry to be a pain but i get this error

Parse error: syntax error, unexpected ',' in /home/ausfish/public_html/Sources/PortalBlocks.php(3592) : eval()'d code on line 4

Offline Chen Zhen

  • The Underdog
  • Operations Manager
  • *
  • Posts: 1329
  • Gender: Male
  • Kinesis
    • WebDev
  • SMF Version: 2.1
  • EhPortal Version: 1.22
Re: Nivo-Slider issue formatting block
« Reply #5 on: April 09, 2016, 07:46:42 PM »

Ya I made an err with using commas for the variable.
The block is fixed, try it again with the amended code.

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Nivo-Slider issue formatting block
« Reply #6 on: April 10, 2016, 04:33:55 AM »
i am pretty sure i did it right how you explained but i only get 4 images  horizontial one after the other in block

see here ausfishing.info

Offline Chen Zhen

  • The Underdog
  • Operations Manager
  • *
  • Posts: 1329
  • Gender: Male
  • Kinesis
    • WebDev
  • SMF Version: 2.1
  • EhPortal Version: 1.22
Re: Nivo-Slider issue formatting block
« Reply #7 on: April 11, 2016, 09:10:44 AM »
I made some errors with my last posts & if I had of tested it out then they would have been realized  :stop:

$context['html_headers'] is displayed in the template prior to the portal content therefore using it in a block will not work.
Imo it would actually be a good feature for Simple Portal to have an option to add some executable php within the head of the document.
(I will add it to EhPortal heh-heh)
For now to have it add the code to the head of the document will require a manual edit to a file.
Adding the css to the head is mandatory but might as well add the js files as well.

I tested the following procedure out & it was working fine...
This example uses the developers code on Github updated 3 years ago plus an external Google jQuery library.
You can adjust the css file and/or the options in the available block to what you want.




jQuery library is now sourced remotely from Google.
You are required to download the files attached & add them to ../img (create the folder if necessary).
Put your 4 example images into the same ../img folder.


Edit: ../Sources/Subs-Portal.php
find:
Code: [Select]
function sportal_init($standalone = false)
{
global $context, $sourcedir, $scripturl, $modSettings;
global $settings, $options, $boarddir, $maintenance, $sportal_version;

replace with:
Code: [Select]
function sportal_init($standalone = false)
{
global $context, $sourcedir, $scripturl, $modSettings, $boardurl;
global $settings, $options, $boarddir, $maintenance, $sportal_version;
$context['html_headers'] .= '
<link href="' . $boardurl . '/img/nivo_slider.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="' . $boardurl . '/img/jquery.nivo.slider.js"></script>';




PHP block code (default options):
Code: [Select]
// XHTML 1.0 Transitional
global $boardurl;

echo '
<div class="slider-wrapper theme-bar">
<div id="slider" class="nivoSlider">
<img src="', $boardurl, '/img/mac.jpg" data-thumb="', $boardurl, '/img/mac.jpg" alt="" title="Caption 1" />
<img src="', $boardurl, '/img/mahi.jpg" data-thumb="', $boardurl, '/img/mahi.jpg" alt="" title="Caption 2" />
<img src="', $boardurl, '/img/sail.jpg" data-thumb="', $boardurl, '/img/sail.jpg" alt="" data-transition="slideInLeft" title="Caption 3" />
<img src="', $boardurl, '/img/tuna.jpg" data-thumb="', $boardurl, '/img/tuna.jpg" alt="" title="#htmlcaption4" title="Caption 4" />
</div>
<div id="htmlcaption4" class="nivo-html-caption">
<span style="font-weight: bold;">This</span> is an example of a <span style="font-size: 2em;">HTML</span> caption with <a href="#">a link</a>.
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$("#slider").nivoSlider({
effect: "random", // 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
controlNav: true, // bullets navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: "<<<", // Prev directionNav text
nextText: ">>>", // Next directionNav text
randomStart: false, // 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>';




Here is a working example, although temporary since I will eventually remove it!
http://web-develop.ca/test_site/index.php?action=forum

Download the attached files & place them into: ../img
Also place your image files into the same folder.
(create the ../img folder if necessary)


source ref.
https://github.com/gilbitron/Nivo-Slider
« Last Edit: April 11, 2016, 05:47:16 PM by Chen Zhen »

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Nivo-Slider issue formatting block
« Reply #8 on: April 11, 2016, 05:34:59 PM »
thank you seen the working  slider very nice i will have to keep a look out for eh portal as well  now will try out your code  see how i go

Offline Chen Zhen

  • The Underdog
  • Operations Manager
  • *
  • Posts: 1329
  • Gender: Male
  • Kinesis
    • WebDev
  • SMF Version: 2.1
  • EhPortal Version: 1.22
Re: Nivo-Slider issue formatting block
« Reply #9 on: April 12, 2016, 04:03:48 PM »

It seems to be working for you & looks good!

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Nivo-Slider issue formatting block
« Reply #10 on: April 12, 2016, 06:20:01 PM »

It seems to be working for you & looks good!


thank you again, with out your help i would of never worked it out  ;D :applause: :applause: :applause: