Nivo slider

Jappi_koeln · January 16, 2014, 10:57pm

Hallo,

ich hab dieses Tutorial: http://wiki.oxidforge.org/Tutorials/de/Nivo-Slider-anstatt4-5-CE-Default-Slider mit angesehen und wollte den Slider auch nutzen, aber ich finde den Ordner /out/azure[B]/tpl/widget[/B] muss ich den neu anlegen?

Ein Ordner habe ich hier gefunden: /application/views/azure/tpl/widget ist der damit gemeint?

avnikaba · January 16, 2014, 11:25pm

Hallo

Oxid bis 4.6 war out/azure/tpl

ab 4.7 ist application/views/azure etc…

also legst du die tpl datein in application/views/azure/tpl/widget/ dort drin.

viele grüsse
avni

avnikaba · January 16, 2014, 11:27pm

nicht vergessen die scripte in base.tpl bei den js dateien einzutragen:

	[{oxscript include='js/widgets/nivoslider.js'}]
	[{oxscript include='js/widgets/initnivo.js'}]

Jappi_koeln · January 16, 2014, 11:31pm

Danke für deine antwort, habe ich nun gemacht, aber leider geht er nicht richtig, siehst du zufällig warum? http://shop.sgdv.de/

avnikaba · January 16, 2014, 11:46pm

hast du die nivoslider css in deine oxid css eingetragen?

Jappi_koeln · January 16, 2014, 11:48pm

Japp ganz ans Ende und hab auch den tmp Ordner geleert.

avnikaba · January 16, 2014, 11:56pm

du musst die änderung im header.tpl vornehmen (oxslider auf galleryslider.tpl) ?
[{oxscript include=‘js/widgets/nivoslider.js’}]
[{oxscript include=‘js/widgets/initnivo.js’}] in base.tpl erfasst?
galleryslider.tpl in /application/views/azure/tpl/widget binär hochgeladen?
nivoslider.js und initnivo.js in out/azure/src/js auch hochgeladen?

avnikaba · January 16, 2014, 11:58pm

so sollte deine galleryslider.tpl aussehen:

[{assign var=oBanners value=$oView->getBanners() }]
[{assign var=“currency” value=$oView->getActCurrency()}]
[{if $oBanners}]
<div id=“slider”>
[{foreach from=$oBanners item=oBanner }]
[{assign var=oArticle value=$oBanner->getBannerArticle() }]
[{assign var=sBannerLink value=$oBanner->getBannerLink() }]
[{if $sBannerLink }]
<a href=“[{ $sBannerLink }]”>
[{/if}]
[{if $oArticle }]
<span class=“promoBox”>
<strong class=“promoTitle”>[{ $oArticle->oxarticles__oxtitle->value }]</strong>
<strong class=“promoPrice”>[{ $currency->sign}] [{ $oArticle->getFPrice() }]</strong>
</span>
[{/if}]
[{assign var=sBannerPictureUrl value=$oBanner->getBannerPictureUrl() }]
[{if $sBannerPictureUrl }]
<img src=“[{ $sBannerPictureUrl }]” height=“470” width=“964” alt=“[{ $oArticle->oxarticles__oxtitle->value }]”>
[{/if }]
[{if $sBannerLink }]
</a>
[{/if}]
[{/foreach }]
</div>
[{/if }]

avnikaba · January 16, 2014, 11:59pm

hier meine nivoslider css

/* The Nivo Slider styles */

#slider {
height: 470px;
position: relative;
width: 960px !important;
z-index: 1;
top: 0px;
margin-top:-14px;
}
#slider img {
left: 0;
position: absolute;
top: 0;
}
#slider img:first-child {
display: none;
}
#slider a {
border: 0 none;
display: block;
}
.nivo-controlNav {
left: 45%;
position: absolute;
top: 450px;
z-index: 200;
}
.nivo-controlNav a {
background: url(“…/…/img/bullets.png”) no-repeat scroll 0 0 transparent;
border: 0 none;
cursor: pointer;
display: block;
float: left;
height: 10px; /22px/
margin-right: 3px;
position: relative;
text-indent: -9999px;
width: 16px; /12px/
z-index: 9;
}
.nivo-controlNav a.active {
background-position: 0 100%; /-22px/
font-weight: 700;
}
.nivo-directionNav a {
/background: url(“…/…/img/promo-arrows.png”) no-repeat scroll 0 0 transparent;/
border: 0 none;
cursor: pointer;
display: block;
height: 70px;
position: absolute;
text-indent: -9999px;
top: 44%;
width: 70px;
z-index: 9;
}
a.nivo-nextNav {
background-position: -30px 0;
right: -4px;
background: url(“…/…/img/sliderControlNext.gif”) no-repeat scroll 0 0 transparent;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}
a.nivo-prevNav {
left: 0px;
background: url(“…/…/img/sliderControlPrev.gif”) no-repeat scroll 0 0 transparent;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}

a.nivo-prevNav:hover{
left: 0px;
background: url(“…/…/img/sliderControlPrev.gif”) no-repeat scroll 0 0 transparent;
opacity: 1;
-webkit-transition: opacity 500ms ease;
transition:opacity 500ms ease;
moz-opacity: 1.0;
filter: alpha(opacity=100);
-moz-transition: opacity 500ms ease;
}
a.nivo-nextNav:hover{
background-position: -30px 0s;
right: -4px;
background: url(“…/…/img/sliderControlNext.gif”) no-repeat scroll 0 0 transparent;
opacity: 1;
-webkit-transition: opacity 500ms ease;
transition:opacity 500ms ease;
moz-opacity: 1.0;
filter: alpha(opacity=100);
-moz-transition: opacity 500ms ease;
}
.nivo-caption {
font-family: Helvetica,Arial,sans-serif;
text-shadow: none;
}
.nivo-caption a {
color: #EFE9D1;
text-decoration: underline;
}
.nivo-nextNav {
right: 0;
}
.clear {
clear: both;
}
.nivoSlider a.nivo-imageLink {
border: 0 none;
display: none;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 6;
}
.nivo-slice {
display: block;
height: 100%;
position: absolute;
z-index: 5;
}
.nivo-box {
display: block;
position: absolute;
z-index: 5;
}

/New Arrivals/
div#manufacturerSlider_new{
width: 960px!important;
}
.itemSlider_new{
position: relative;
}

.itemSlider_new div.leftHolder a.prevItem_new span.slidePointer_new{
background-position: 4px 50%;
right: 0;
opacity: 0.2;
-webkit-transition: opacity 500ms ease;
transition:opacity 500ms ease;
moz-opacity: 0.2;
filter: alpha(opacity=20);
-moz-transition: opacity 500ms ease;
}
.itemSlider_new div.leftHolder a.prevItem_new span.slidePointer_new:hover, .itemSlider_new .nextItem_new span.slidePointer_new:hover {
opacity: 0.95;
-webkit-transition: opacity 500ms ease;
transition:opacity 500ms ease;
moz-opacity: 0.95;
filter: alpha(opacity=95);
-moz-transition: opacity 500ms ease;
}

.itemSlider_new .prevItem_new span.slidePointer_new, .itemSlider_new .nextItem_new span.slidePointer_new{
background: url(“…/…/img/arrows2.png”) no-repeat scroll -34px 50% #333333;
float: right;
height: 100%;
margin: 0;
position: relative;
text-indent: -9999px;
width: 30px;
z-index: 5;
opacity: 0.2;
-webkit-transition: opacity 500ms ease;
transition:opacity 500ms ease;
moz-opacity: 0.2;
filter: alpha(opacity=20);
-moz-transition: opacity 500ms ease;
}

.itemSlider_new .slideNav {
bottom: -1px;
color: #FFFFFF;
display: block;
font-size: 21px;
font-weight: 700;
height: 60px;
line-height: 24px;
position: absolute;
text-decoration: none;
top: 48px;
z-index: 4;
}
.itemSlider_new .nextItem_new {
right: -1px;
width: 30px;
}

.itemSlider_new .leftHolder {
bottom: -1px;
height: 150px;
left: -1px;
position: absolute;
top: 0;
width: 0;
z-index: 3;
}

avnikaba · January 17, 2014, 12:00am

initnivo.js

$(document).ready(function()
{
var IE = /@cc_on!@/false;
/* init events in content */
var thisParent = thisParent || $(“body”);
if(IE == false);
initEvents(thisParent);

});

/* Init basic events and effects */
function initEvents(thisParent)
{
initNivoSlider();
}

function initNivoSlider(){
$(‘#slider’).nivoSlider({
effect: ‘fade’, //fade
slices: 15,
boxCols: 12, // For box animations
boxRows: 6, // For box animations
animSpeed: 1000,
pauseTime: 4000,
startSlide: 0, //Set starting Slide (0 index)
boxCols: 8, // For box animations
boxRows: 4,
directionNav: true, //Next & Prev
directionNavHide: true, //Only show on hover
controlNav: false, //1,2,3… //true
controlNavThumbs: false, //Use thumbnails for Control Nav
controlNavThumbsSearch: ‘.jpg’, //Replace this with…
controlNavThumbsReplace: ‘_thumb.jpg’, //…this in thumb Image src
keyboardNav: true, //Use left & right arrows
pauseOnHover: true, //Stop animation while hovering
manualAdvance: false, //Force manual transitions
captionOpacity: 0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
}

Jappi_koeln · January 17, 2014, 12:01am

du musst die änderung im header.tpl vornehmen (oxslider auf galleryslider.tpl) ?

Sieht bei mir derzeit so aus:

[{if $oView->getClassName()==‘start’ && $oView->getBanners()|@count > 0 }]
<div class=“nivoSlider”>
[{include file=“widget/galleryslider.tpl” }]
</div>
[{/if}]

und die Datei ist auch hochgeladen!

[{oxscript include=‘js/widgets/nivoslider.js’}]

den habe ich so eingebunden, ist dieses nicht richtig?

    [{oxscript include='js/libs/nivoslider.js'}]

galleryslider.tpl in /application/views/azure/tpl/widget binär hochgeladen?

habe ich mit FTP hochgeladen!

nivoslider.js und initnivo.js in out/azure/src/js auch hochgeladen?

beide Dateien sind ebenfalls mit FTP hochgeladen worden.

avnikaba · January 17, 2014, 12:02am

füge es mal so ein:

[{if $oView->getClassName()==‘start’ && $oView->getBanners()|@count > 0 }]
<div class=“oxSlider”>
[{include file=“widget/galleryslider.tpl” }]
</div>
[{/if}]

avnikaba · January 17, 2014, 12:06am

wenn deine nivoslider.js in out/azure/src/js/widgets ist dann bitte so in base.tpl eintragen

[{oxscript include=‘js/widgets/nivoslider.js’}]

und nicht so

[{oxscript include=‘js/libs/nivoslider.js’}]

da libs ein anderes Verzeichnis ist.

du musst das verzeichnis angeben wo die datein auch drin sind.

Jappi_koeln · January 17, 2014, 12:09am

Habe ich gemacht: http://shop.sgdv.de/ aber die Bilder überlagern sich leider

avnikaba · January 17, 2014, 12:13am

ja dann ändere mal die angaben in galleryslider.tpl und oxid css auf deine grösse des bildes:

oxid css statt

#slider {
height: 470px;
position: relative;
width: 960px !important;
z-index: 1;
top: 0px;
margin-top:-14px;
}

in

#slider {
height: 220px;
position: relative;
width: 940px !important;
z-index: 1;
top: 0px;
margin-top:-14px;
}

galleryslider.tpl

  &lt;img src="[{ $sBannerPictureUrl }]" height="470" width="964" alt="[{ $oArticle-&gt;oxarticles__oxtitle-&gt;value }]"&gt;

in

  &lt;img src="[{ $sBannerPictureUrl }]" height="220" width="940" alt="[{ $oArticle-&gt;oxarticles__oxtitle-&gt;value }]"&gt;

Jappi_koeln · January 17, 2014, 12:22am

Vielen vielen dank, hat nun geklappt.

avnikaba · January 17, 2014, 12:22am

p.s. die nivoslider icons (pfeile, bullets) kannst du hier herunterladen:

http://demo.dev7studios.com/nivo-slider/