poniższy skrypt przerzuciłem do footer
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.js"></script>
<script>
jQuery('#css-demo').slippry({
// general elements & wrapper
slippryWrapper: '<div class="sy-box css-demo" />', // wrapper to wrap everything, including pager
// options
adaptiveHeight: true, // height of the sliders adapts to current slide
useCSS: true, // true, false -> fallback to js if no browser support
autoHover: false,
transition: 'horizontal'
});
jQuery('#jquery-demo').slippry({
// general elements & wrapper
slippryWrapper: '<div class="sy-box jquery-demo" />', // wrapper to wrap everything, including pager
// options
adaptiveHeight: false, // height of the sliders adapts to current slide
useCSS: false, // true, false -> fallback to js if no browser support
autoHover: false,
transition: 'horizontal'
});
</script>
pełny footer:
<debugstuff>
</div>
</div>
<div id="footer">
<div class="upper">
<div class="wrapper">
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.js"></script>
<script>
jQuery('#css-demo').slippry({
// general elements & wrapper
slippryWrapper: '<div class="sy-box css-demo" />', // wrapper to wrap everything, including pager
// options
adaptiveHeight: true, // height of the sliders adapts to current slide
useCSS: true, // true, false -> fallback to js if no browser support
autoHover: false,
transition: 'horizontal'
});
jQuery('#jquery-demo').slippry({
// general elements & wrapper
slippryWrapper: '<div class="sy-box jquery-demo" />', // wrapper to wrap everything, including pager
// options
adaptiveHeight: false, // height of the sliders adapts to current slide
useCSS: false, // true, false -> fallback to js if no browser support
autoHover: false,
transition: 'horizontal'
});
</script>
{$lang_select}
{$theme_select}
<ul class="menu bottom_links">
{$contact_us}
<li><a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a></li>
<li><a href="#top">{$lang->bottomlinks_returntop}</a></li>
<li><a href="<archive_url>">{$lang->bottomlinks_litemode}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=markread{$post_code_string}">{$lang->bottomlinks_markread}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=syndication">{$lang->bottomlinks_syndication}</a></li>
</ul>
</div>
</div>
<div class="lower">
<div class="wrapper">
<span id="current_time">{$lang->welcome_current_time}</span>
<span id="copyright">
<!-- MyBB is free software developed and maintained by a volunteer community.
It would be much appreciated by the MyBB Group if you left the full copyright and "powered by" notice intact,
to show your support for MyBB. If you choose to remove or modify the copyright below,
you may be refused support on the MyBB Community Forums.
This is free software, support us and we'll support you. -->
{$lang->powered_by} <a href="https://mybb.com" target="_blank">MyBB{$mybbversion}</a>, © 2002-{$copy_year} <a href="https://mybb.com" target="_blank">MyBB Group</a>.
<!-- End powered by -->
</span>
</div>
</div>
</div>
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}
</div>
Ha i działa, rusza się !!
jeszcze będe chciał pobawić się rozmiarem tego, to w pliku global.css ? jest tam trochę tych opcji z szerokością i wysokością
mhm, dardy jedną opcją zeskanować cały slider ? bo teraz skaluje tyko poszczególne elementy, ewentualnie którą opcją ustawić maksymalny rozmiar
/**
*
* slippry v1.4.0 - Responsive content slider for jQuery
* http://slippry.com
*
* Authors: Lukas Jakob Hafner - @saftsaak
* Thomas Hurd - @SeenNotHurd
*
* Copyright 2016, booncon oy - http://booncon.com
*
*
* Released under the MIT license - http://opensource.org/licenses/MIT
*/
/* kenBurns animations, very basic */
@keyframes left-right {
0% {
transform: translateY(-20%) translateX(-10%);
}
100% {
transform: translateY(0%) translateX(10%);
}
}
@keyframes right-left {
0% {
transform: translateY(0%) translateX(10%);
}
100% {
transform: translateY(-20%) translateX(-10%);
}
}
/* added to the original element calling slippry */
.sy-box.sy-loading {
background: url("/images/sy-loader.gif") 50% 50% no-repeat;
background-size: 32px;
min-height: 40px;
}
.sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
visibility: hidden;
}
/* element that wraps the slides */
.sy-slides-wrap {
position: relative;
height: 100%;
width: 100%;
}
.sy-slides-wrap:hover .sy-controls {
display: block;
}
/* element that crops the visible area to the slides */
.sy-slides-crop {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
/* list containing the slides */
.sy-list {
width: 100%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.sy-list.horizontal {
transition: left ease;
}
.sy-list.vertical {
transition: top ease;
}
/* single slide */
.sy-slide {
position: absolute;
width: 100%;
z-index: 2;
}
.sy-slide.kenburns {
width: 140%;
left: -20%;
}
.sy-slide.kenburns.useCSS {
transition-property: opacity;
}
.sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
animation-name: left-right;
animation-fill-mode: forwards;
}
.sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
animation-name: right-left;
animation-fill-mode: forwards;
}
.sy-slide.sy-active {
z-index: 3;
}
.sy-slide > img {
margin: 0;
padding: 0;
display: block;
width: 100%;
border: 0;
}
.sy-slide > a {
margin: 0;
padding: 0;
display: block;
width: 100%;
}
.sy-slide > a > img {
margin: 0;
padding: 0;
display: block;
width: 100%;
border: 0;
}
/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
.sy-controls {
display: none;
list-style: none;
height: 100%;
width: 100%;
position: absolute;
padding: 0;
margin: 0;
}
.sy-controls li {
position: absolute;
width: 10%;
min-width: 4.2em;
height: 100%;
z-index: 33;
}
.sy-controls li.sy-prev {
left: 0;
top: 0;
}
.sy-controls li.sy-prev a:after {
background-position: -5% 0;
}
.sy-controls li.sy-next {
right: 0;
top: 0;
}
.sy-controls li.sy-next a:after {
background-position: 105% 0;
}
.sy-controls li a {
position: relative;
width: 100%;
height: 100%;
display: block;
text-indent: -9999px;
}
.sy-controls li a:link, .sy-controls li a:visited {
opacity: 0.4;
}
.sy-controls li a:hover, .sy-controls li a:focus {
opacity: 0.8;
outline: none;
}
.sy-controls li a:after {
content: "";
background-image: url("/images/arrows.svg");
background-repeat: no-repeat;
background-size: cover;
text-align: center;
text-indent: 0;
line-height: 2.8em;
color: #111;
font-weight: 800;
position: absolute;
background-color: #fff;
width: 2.8em;
height: 2.8em;
left: 50%;
top: 50%;
margin-top: -1.4em;
margin-left: -1.4em;
border-radius: 50%;
}
@media only screen and (max-device-width: 600px) {
.sy-controls {
display: block;
}
.sy-controls li {
min-width: 2.1em;
}
.sy-controls li a:after {
width: 1.4em;
height: 1.4em;
margin-top: -0.7em;
margin-left: -0.7em;
}
}
/* captions, styled fo the overlay variant */
.sy-caption-wrap {
position: absolute;
bottom: 2em;
z-index: 12;
left: 50%;
}
.sy-caption-wrap .sy-caption {
position: relative;
left: -50%;
background-color: rgba(0, 0, 0, 0.54);
color: #fff;
padding: 0.4em 1em;
border-radius: 1.2em;
}
.sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
color: #e24b70;
font-weight: 600;
text-decoration: none;
}
.sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
text-decoration: underline;
}
@media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
.sy-caption-wrap {
left: 0;
bottom: 0.4em;
}
.sy-caption-wrap .sy-caption {
left: 0;
padding: 0.2em 0.4em;
font-size: 0.92em;
border-radius: 0;
}
}
/* pager bubbles */
.sy-pager {
clear: both;
display: block;
width: 100%;
margin: 1em 0 0;
padding: 0;
list-style: none;
text-align: center;
}
.sy-pager li {
display: inline-block;
width: 1.2em;
height: 1.2em;
margin: 0 1em 0 0;
border-radius: 50%;
}
.sy-pager li.sy-active a {
background-color: #e24b70;
}
.sy-pager li a {
width: 100%;
height: 100%;
display: block;
background-color: #ccc;
text-indent: -9999px;
background-size: 2em;
border-radius: 50%;
}
.sy-pager li a:link, .sy-pager li a:visited {
opacity: 1.0;
}
.sy-pager li a:hover, .sy-pager li a:focus {
opacity: 0.6;
}
/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
.sy-filler {
width: 100%;
}
.sy-filler.ready {
transition: padding 600ms ease;
}
? bym nie napsuł czegoś