machen royal slider fullscreen
Hallo, ich bin mit royal Schieberegler und versuche zu machen es Vollbild. Der nav-Pfeile erscheinen, um richtig funktionieren, aber sonst nichts tut. Ich möchte es für ein Funktion wie diese Website (klicken Sie auf eines der Vorschaubilder, um zu sehen, die Schieberegler) http://ahrengot.com/work/skive-festival-website/ und das ist die Seite, ich habe Probleme replizieren, http://klossal.com/js/royalslider/demo/test.html
Jede Hilfe die ich bekommen kann mit diesem wäre toll, das ist so ziemlich das Letzte feature, das ich brauche für meine Website und ich habe gerade in Ermangelung an es für acouple Tage jetzt, danke.
HTML:
<div id="content-slider" class="royalSlider iskin">
<ul class="royalSlidesContainer">
<li class="royalSlide">
<div style="border:1px solid red;height:100%;">
<img src="img/contentSliderAssets/4.jpg" width="285" height="200"/>
<div style="border:1px solid red;">
<h4>Content Slider</h4>
<p>You can place HTML content on each slide, touch navigation still
works. Also you can disable mouse navigation completely or just for specific elements:
</p>
<a class="learnMore non-draggable" href="javascript:void()">Non-
draggable element</a>
<a class="learnMore" href="javascript:void()">Draggable element</a>
</div>
</div>
</li>
<li class="royalSlide">
<div >
<img src="img/contentSliderAssets/1.jpg" width="195" height="240"/>
<img src="img/contentSliderAssets/2.jpg" width="178" height="240"/>
<img src="img/contentSliderAssets/3.jpg" width="197" height="240"/>
</div>
</li>
<li class="royalSlide">
<div>
<div style="text-align:center; width: 660px; margin: 100px auto 0;">
<p>Slider is tested on iPad, iPad 2, iPhone 4, HTC Desire and
Blackberry PlayBook.<br/> If you've found that something works incorrect on your
device, so please contact me using contact form on my <a
href="http://goo.gl/H9VAg">profile page</a> and I'll try to fix it asap.</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
/**
* Slides area (set background here)
*/
.royalSlider .royalWrapper {
overflow:hidden;
position:relative;
width:100%;
height:100%;
}
.royalSlider .royalSlide,
.royalSlider .royalWrapper {
/* Bakground behind slides */
background: #111111;
}
/* slides holder, grabbing container */
.royalSlider .royalSlidesContainer {
position: relative;
left: 0;
top: 0 !important;
list-style:none !important;
margin:0 !important;
padding:0 !important;
border: 0 !important;
}
/* slide item */
.royalSlider .royalSlide {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
list-style: none !important;
position:relative;
float:left;
overflow:hidden;
}
/*
Direction Navigation (arrows)
*/
.royalSlider .arrow
{
/*background:url(../img/controlsSprite.png) no-repeat 0 0;*/
background-color: #C00;
background-repeat: no-repeat;
background-position: 0 0;
/* change arrows size here */
width: 45px;
height: 90px;
top:50%;
margin-top:-45px;
cursor: pointer;
display: block;
position: absolute;
z-index:25;
}
.royalSlider .arrow:hover {
}
.royalSlider .arrow.disabled {
}
/* left arrow */
.royalSlider .arrow.left {
background-position: top left;
left: 0;
}
/* right arrow */
.royalSlider .arrow.right {
background-position: top right;
right: 0;
}
/* Control navigation container (bullets or thumbs) */
.royalSlider .royalControlNavOverflow {
width:100%;
overflow:hidden;
position:absolute;
margin-top:-20px;
z-index:25;
}
/* This container is inside ".royalControlNavContainer"
and is used for auto horizontal centering */
.royalSlider .royalControlNavCenterer {
float: left;
position: relative;
left: -50%;
}
/* Control navigation container*/
.royalSlider .royalControlNavContainer {
float: left;
position: relative;
left: 50%;
}
/* Scrollable thumbnails containers */
.royalSlider .royalControlNavThumbsContainer {
left:0;
position:relative;
}
.royalSlider .thumbsAndArrowsContainer {
overflow:hidden;
width: 100%;
position: relative;
}
.royalSlider .royalControlNavOverflow.royalThumbs {
width: auto;
position: relative;
overflow: hidden;
margin-top:4px;
}
/*
Control navigation (bullets, thumbnails)
*/
.royalSlider .royalControlNavOverflow a{
background:#0C0 none no-repeat scroll 0 0;
width:20px;
height:20px;
float:left;
cursor:pointer;
position:relative;
display:block;
text-indent: -9999px;
}
/* Current control navigation item */
.royalSlider .royalControlNavOverflow a.current {
background-color: #C00;
}
/* Hover state navigation item */
.royalSlider .royalControlNavOverflow a:hover {
background-color: #00C;
}
/* Thumbnails */
.royalSlider .royalControlNavOverflow a.royalThumb{
/*background: none no-repeat 0 0;*/
/*background-color: ;*/
width:144px;
height:60px;
/* thumbnails spacing, use margin-right only */
margin-right:4px;
}
.royalSlider .royalControlNavOverflow a.royalThumb.current {
background-position: -3px -3px !important;
border:3px solid #C00 !important;
width:138px;
height:54px;
}
.royalSlider .royalControlNavOverflow a.royalThumb:hover {
background-position: -3px -3px;
border:3px solid #00C;
width:138px;
height:54px;
}
/*
Thumbnails navigation arrows
*/
.royalSlider .thumbsArrow {
width: 38px;
height: 68px;
cursor: pointer;
display: block;
position: relative;
z-index: 25;
background: #C99;
}
.royalSlider .thumbsArrow.left {
float: left;
}
.royalSlider .thumbsArrow.right {
float: right;
}
.royalSlider .thumbsArrow:hover {
}
.royalSlider .thumbsArrow.disabled {
}
/* Captions container */
.royalSlider .royalCaption {
z-index:20;
display:block;
position:absolute;
left:0;
top:0;
/*font: normal normal normal 1em/1.5em Georgia, serif;
color:#FFF; */
}
/* Caption item */
.royalSlider .royalCaptionItem {
position:absolute;
left:0;
top:0;
margin: 0;
padding: 0;
}
/* Loading (welcome) screen */
.royalSlider .royalLoadingScreen {
background:#FFF;
width:100%;
height:100%;
position:absolute;
z-index:99;
}
/* Loading screen text ("Loading...") */
.royalSlider .royalLoadingScreen p {
width:100%;
position:absolute;
margin:0 auto;
top: 45%;
text-align:center;
}
/* single slide image preloader */
.royalSlider .royalPreloader {
position:absolute;
width:24px;
height:24px;
left:50%;
top:50%;
margin-left:-12px;
margin-top:-12px;
z-index:0;
background-image:url(../img/preloader.gif);
}
.royalSlider .grab-cursor{cursor:move;}
.royalSlider .grab-cursor{cursor:url("../img/cursors/grab.png") 8 8,-moz-grab;}
.royalSlider .grab-cursor{*cursor:url(../img/cursors/grab.cur);}
.royalSlider .grab-cursor{cursor:move\0/;} /* ie8 hack */
.royalSlider .grabbing-cursor{cursor:move;}
.royalSlider .grabbing-cursor{cursor:url("../img/cursors/grabbing.png") 8 8,-moz-
grabbing;}
.royalSlider .grabbing-cursor{*cursor:url(../img/cursors/grabbing.cur);}
/* Cursor used if mouse dragging is disabled */
.royalSlider .auto-cursor{cursor:auto;}
.royalSlider .royalHtmlContent {
position: absolute;
top: 0;
left: 0;
}
.royalSlider .non-draggable {
cursor: auto;
}
.royalSlider .fade-container .royalSlide{
position: absolute;
left: 0;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
z-index: 10;
}
.royalSlider .royalImage {
max-width:none;
margin:0;
padding: 0 !important;
border: 0 !important;
}
InformationsquelleAutor loriensleafs | 2012-07-12
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Warum nicht Fragen, script-Autor. Automatisch skalieren-Schieberegler-option stellen Sie die Höhe skalieren, basierend auf Breite, die Sie brauchen, um es zu deaktivieren, wenn Sie wollen, dass es Vollbild.
und wie würde ich es tun, wenn wir das Bild in ein div, also denke ich, mehr wie ein content-scroller?
klossal.com/js/royalslider/demo/test.html
Es gibt imageScaleMode und imageAlignCenter Optionen. Überprüfen Sie bitte die Javascript-Optionen " in docs.
InformationsquelleAutor Dmitry Semenov
In Royalslider-Skript-Datei, die Sie verwalten können Sie es, indem Sie folgende Werte:
wissen Sie, warum die Höhe eingeschränkt ist?
InformationsquelleAutor Ahsan Khurshid
Bemerkte ich Ihre Frage, weil ich gesehen habe tracffic kommen, um mein portfolio hier ab. Meine gesamte WordPress-theme ist eigentlich öffentlich auf Github zur Verfügung, so können Sie einfach nehmen Sie einen Blick auf meinen code. Hier der link: https://github.com/Ahrengot/Ahrengot-WP-Theme
und hier ist ein link zu der JS-Datei, die von der Galerie: https://github.com/Ahrengot/Ahrengot-WP-Theme/blob/master/library/js/work-gallery.js
Hoffe, das hilft 🙂
InformationsquelleAutor Ahrengot