NivoSlider zeigt es nicht an?

Deutsches Forum
1

Hallo Zusammen,

vielen Dank fürs reinschauen :slight_smile:

hab mal schnell nach dieser Anleitung:


Den Nivoslider eingebaut unter:
http://custest.bragis.net/
Shop version: 4.6.2

Also laut Firebug, lädt er den Nivoslider auch rein…
doch anzeigen tut es mir nichts… sollte eigentlich nur eine kleinigkeit sein, doch ich finde den fehler nicht ;(

würde mir jemand bitte helfen?

Dank an euch :slight_smile:

2

Hallo,
ist doch schon fast alles da, jetzt fehlt nur noch ein


 #slider {
  position: relative;
  width: 940px;
  height: 240px; 
  }

in der oxid.css und schon funktioniert es :wink:

3

oh man danke nickname!
ich wusste es doch dass es nur noch eine kleinigkeit ist :smiley: argh
läuft! :slight_smile:

bzw. ein wenig verballert es mir noch den effekt :smiley:

4

“ein wenig” ist gut :smiley:

5

“bei mir” funktionierts aber. Mal Strg+F5 drücken :wink:

6

liegt das vllt an der bildgröße? :slight_smile:

7

Na klar, die musst du schon noch gleich machen, zB 940x240px halt…

8

Die Bilder haben diese Größe.

Dann doch eine CSS einstellung… oder?

9

keiner eine Idee wegen der Größe?

10

Da fehlen noch deutlich mehr CSS-Angaben die für den Slider benötigt werden.
Die Grafiken für “prev” und “next” werden deswegen z. b. nicht gezogen.

11

Welche wären das? kannst du mir bitte helfen?
komme da echt nich mehr weiter…
:frowning:

12

In dem Nivo-Slider-Paket sind neben dem Nivoslider auch noch 2-3 Themes dabei.

Bei jedem dieser Themes sind die Pfeile, Buttons, CSS-Dateien usw enthalten. Diese musst du nur noch einbinden und hochladen.

13

Hast Du die CSS-Angaben aus der Anleitung ergänzt?

14

[QUOTE=nickname;99295]In dem Nivo-Slider-Paket sind neben dem Nivoslider auch noch 2-3 Themes dabei.

Bei jedem dieser Themes sind die Pfeile, Buttons, CSS-Dateien usw enthalten. Diese musst du nur noch einbinden und hochladen.[/QUOTE]

schau mal auf meine seite hab ich bereits gemacht :slight_smile:

im moment schaut meine CSS so aus:


 #slider {
  position: relative;
  width: 940px;
  height: 240px; 
}

.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;
}
/* 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;
}

.nivoSlider {
	position:relative;
	background:#fff url("../../img/loading2.gif") no-repeat 50% 50%;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.nivoSlider a {
	border:0;
	display:block;
}

.nivo-controlNav {
	text-align: center;
	padding: 20px 0;
}
.nivo-controlNav a {
	display:inline-block;
	width:22px;
	height:22px;
	background:url("../../img/bullets.png") no-repeat;
	text-indent:-9999px;
	border:0;
	margin: 0 2px;
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}


hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

.nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
    color:#fff;
}

.nivo-controlNav.nivo-thumbs-enabled {
	width: 100%;
}
.nivo-controlNav.nivo-thumbs-enabled a {
	width: auto;
	height: auto;
	background: none;
	margin-bottom: 5px;
}
.nivo-controlNav.nivo-thumbs-enabled img {
	display: block;
	width: 120px;
	height: auto;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url("../../img/arrows2.png") no-repeat;
	text-indent:-9999px;
	border:0;
	opacity: 0;
	-webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
15

Stimmt, passt, nur mit der Bildhöhe stimmts irgendwo noch nicht ganz. Deine Bilder sind 940x220px, da du die CSS aus meinem ersten Post verwendest, solltest du sie 940x240 hoch machen oder einfach CSS ändern :slight_smile:

16

:smiley: lag glaubt echt daran…
magst nochmal drüber schauen ob dir noch was auffällt?

DANKE “nickname” für deine mühe :slight_smile: