I am using jssor to create slideshow that fades in and out. It works perfectly on all the devices except for iphones and ipads. On these devices it jumps to white and then fades. Does anyone have any fixes for this. THis is the code i'm using.
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [
{ $Duration:1200, $Opacity:2 }
];
var options = {
$SlideDuration: 800,
$DragOrientation: 3,
$AutoPlay: true,
$AutoPlayInterval: 3000,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 686px; height: 224px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 686px; height: 224px;">
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/001_CG-external.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/002_crooke-external.jpg" /></a></div>
<div><a u="image" href="/developments/completed/morrismanor"><img src="/Publishingimages/slideshow/003_MorrisManor-external.jpg" /></a></div>
<div><a u="image" href="/developments/completed/880willoughby"><img src="/Publishingimages/slideshow/004_880-external.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/005_CG-lobby.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/006_CG-apartment.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/007_Crooke-garden.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/008_Crooke-community-room.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/009_Crooke-bedroom.jpg" /></a></div>
<div><a u="image" href="/developments/completed/880willoughby"><img src="/Publishingimages/slideshow/010_880-garden.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/011_CG-courtyard.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/012_CGexternal2.jpg" /></a></div>
</div>
Try using -webkit-backface-visibility: hidden; on your element
for more info, see this related question: iPhone WebKit CSS animations cause flicker
Related
If I put the div where I draw the graph the "style = display: none" attribute, this resizes my chart in half.
<div id='chart_div_inmediata' style='width: 900px; height: 300px;display:none'></div>
Result :
<div id="chart_div_inmediata" class="google-visualization-atl container" style="width: 900px; height: 300px; display: none;">
<div class="" style="position: relative; width: 400px; height: 200px;">
</div>
How do I fix this? Thank!
I'm adding a different-size-photo-slider to my site. The slider works properly but the bullet navigator does not appear.
I placed the bullet navigator inside 'slider1_container but it still doesn't work.
I imported the bullet png to the root folder too.
Thanks for your help.
<div id="slider1_container" style="position: relative; width: 700px; height: 467px; background-color: #FFFFFF; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; background-color: #FFF; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 1px; top: 5px; width: 700px; height: 467px; overflow: hidden;">
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 01.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 02.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_6130 copy.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_8611-Edit-Edit-1.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_6114 copy_2.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_5825 copy.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="
images/MoscowSerie1/IMG_2751 copy copy_1.jpg" /></a>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_2209 copy.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_0518 _1.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_0390 copy.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_0380 bw copy.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/IMG_0341 bw copy copy.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 07.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 06.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 05.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 01.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 02.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 03.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="images/MoscowSerie1/ moscou mockba 04.jpg" /></a>
</div>
</div>
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
<style>
/* jssor slider bullet navigator skin 13 css */
/*
.jssorb13 div (normal)
.jssorb13 div:hover (normal mouseover)
.jssorb13 .av (active)
.jssorb13 .av:hover (active mouseover)
.jssorb13 .dn (mousedown)
*/
.jssorb13 {
position: absolute;
}
.jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
position: absolute;
/* size of bullet elment */
width: 21px;
height: 21px;
background: <img src="images/SliderNavigators/b13.png" width="120" height="30" alt="navigator">;
overflow: hidden;
cursor: pointer;
}
.jssorb13 div { background-position: -5px -5px; }
.jssorb13 div:hover, .jssorb13 .av:hover { background-position: -35px -5px; }
.jssorb13 .av { background-position: -65px -5px; }
.jssorb13 .dn, .jssorb13 .dn:hover { background-position: -95px -5px; }
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb13" style="position: absolute; bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 21px; HEIGHT: 21px;"></div>
</div>
<!--#endregion Bullet Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">Thumbnail Slider</a>
</div>
<!-- Jssor Slider End -->
</body>
Please make sure you specified $BulletNavigatorOptions
var options = {
...,
BulletNavigatorOptions: {
$JssorBulletNavigator$,
$ChanceToShow: 2,
$AutoCenter: 1,
$Steps: 1,
$Lanes: 1,
$SpacingX: 10,
$SpacingY: 10,
$Orientation: 1
}
};
Edit
Please upload b13.png to your [root]/images folder.
And replace
background: <img src="images/SliderNavigators/b13.png" width="120" height="30" alt="navigator">;
with
background: url(/images/SliderNavigators/b13.png) no-repeat;
I would like to format a slider so that a text title appears above the image and a button appears below. Is it possible create a slider similar to the attached screenshot?
You can place any html code in each slide,
<div u="slides">
<div>
<img u="image" src="url" />
<div style="position: absolute; top: npx; left: npx; width: npx; height: npx;">
Your text here
</div>
<div class="yourbutton" style="position: absolute; top: npx; left: npx; width: npx; height: npx;">
Your button text
</div>
</div>
</div>
I would like to add a video inside my current image slider. I don't want only video to play but a mix of video and images. I've been able to get the video to play but I need to add the pause, play and stop controllers as well as make that slide last longer than the other slides. Can anyone please help me?
http://www.piratesdinneradventureca.com/
<!-- Insert Slideshow -->
<div id="slideshowwrapper">
<div id="slider1_container" style="left: 0px; top: 5px; width: 687px; height: 324px; overflow: visible; position: relative;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 687px; height: 324px; overflow: hidden;">
<div><a u="image" href="http://www.piratesdinneradventureca.com/special-offers/"><img src="<?php echo get_template_directory_uri(); ?>/images/Halloween-show.png" /></a></div>
<div><a u="image" href="http://www.piratesdinneradventureca.com/special-offers/"><img src="<?php echo get_template_directory_uri(); ?>/images/After-Summer.png" /></a></div>
<div><video style="width="687px" height="324px" autoplay>
<source src="<?php echo get_template_directory_uri(); ?>/images/PiratesSeaDragon_converted.mp4" type="video/mp4" />
<source src="<?php echo get_template_directory_uri(); ?>/images/PiratesSeaDragon.ogv" type="video/ogg" pHideControls="0" />
</video></div>
Jssor Slider supports youtube video.
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script type="text/javascript" src="../js/jssor.player.ytiframe.min.js"></script>
You can put a video player in any slide in following format:
<div>
<div u="player" style="position: relative; top: 0px; left: 0px; width: 640px; height: 390px; overflow: hidden;">
<!-- iframe in ebay page is not allowed, youtube iframe video is not supported for ebay listing -->
<iframe pHandler="ytiframe" pHideControls="0" width="640" height="390" style="z-index: 0;" src="http://www.youtube.com/embed/H7jtC8vjXw8?enablejsapi=1&version=3&playerapiid=ytplayer&fs=1&wmode=transparent" frameborder="0" scrolling="no"></iframe>
<!-- play cover begin (optional, can remove play cover) -->
<div u="cover" class="videoCover" style="position: absolute; top: 0px; left: 0px; background-color: #000; background-image: url(../img/play.png); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=40); opacity: .4; cursor: pointer; display: none; z-index: 1;"></div>
<!-- play cover end -->
<!-- close button begin (optional, can remove close button) -->
<style>
.closeButton { background-image: url(../img/close.png); }
.closeButton:hover { background-position: -30px 0px; }
</style>
<div u="close" class="closeButton" style="position: absolute; top: 0px; right: 1px; width: 30px; height: 30px; background-color: #000; cursor: pointer; display: none; z-index: 2;"></div>
<!-- close button end -->
</div>
</div>
and add
//fetch and initialize youtube players
$JssorPlayer$.$FetchPlayers(document.body);
does anyone know how to use a single H1 tag effectively in a Jssor full width slider so that the tag also stretches and resizes with the slider when browser resizes?
Please just do it as what you can imagine. See following,
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px;
height: 500px; overflow: hidden;">
<div>
<img u="image" src="../img/1920/red.jpg" />
<h1>your content here</h1>
</div>
<div>
<img u="image" src="../img/1920/red.jpg" />
<h1>your content here</h1>
</div>
</div>