SimplePortal
Customization => Custom Coding => Topic started by: swoodie 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
<!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
/*
* 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}
-
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:
// 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.
-
thank you for that i will give it a go & see how it turns out & post back
-
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:
// 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>';
-
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
-
Ya I made an err with using commas for the variable.
The block is fixed, try it again with the amended code.
-
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
-
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:
function sportal_init($standalone = false)
{
global $context, $sourcedir, $scripturl, $modSettings;
global $settings, $options, $boarddir, $maintenance, $sportal_version;
replace with:
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):
// 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
-
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
-
It seems to be working for you & looks good!
-
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: