Im using the following code on my website Contact Lenses Aus
<p>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function() {
slider = jQuery('#slider-content');
slider.before('<div id="stripNav0" class="stripNav">').cycle({
fx: 'scrollLeft',
timeout: 6000,
speed: 1000,
next: '.stripNavL',
prev: '.stripNavR',
pager: '#stripNav0'
});
});
nextLink = jQuery('#stripNavLa');
prevLink = jQuery('#stripNavRa');
changeFx = function(fx) {
opts = $(slider).data('cycle.opts');
opts.currFx = fx;
opts.fx = fx;
slider.cycle.saveOriginalOpts(opts);
}
// ]]>
</script>
</p>
<div class="slider-wrap">
<div id="stripNavL0" class="stripNavL" onclick="changeFx('scrollRight')"><a id="stripNavLa" href="#">Left</a></div>
<div id="slider-content" class="slider-wrap"><img src="{{media url="home_banner.jpg"}}" alt="Blue Contact Lenses" /><img src="{{media url="temp_home_banner.jpg"}}" alt="Contact Lenses Online" /> <img src="{{media url="home_banner_3.jpg"}}" alt="Coloured Contact Lenses" /></div>
<div id="stripNavR0" class="stripNavR" onclick="changeFx('scrollLeft')"><a id="stripNavRa" href="#">Right</a></div>
</div>
<!-- .slider-wrap -->
Now, this all works fine on some systems.. but i keep finding on my laptop that the images on first load wont display the height, and end up getting hidden. Does anyone know a way to fix this?
Well i find that jquery cycle sets the images position css attribute to absolute which causes the parent container with no definite height.
Either set the height attribute of the parent container(recommeded)
make some amendment in jquery cycle js file and find the max height among the listed images and set it to the parent.
Related
I have a problem with the code below. The window does not scroll to the third section. The code jumps from slide two to slide four.
In my console log the data is correct 600, 1200, 1800 and 2400.
I tried different things but the bug is still there.
<html>
<head>
<style>
body, html{margin:0;}
.slide{height: 600px;}
button{position:fixed; top:0; left:50%; margin-left:-32px;}
</style>
</head>
<body>
<div class="container">
<div class="slide onscreen" style="background-color:#FFC000;"></div>
<div class="slide" style="background-color:#FF4800;"></div>
<div class="slide" style="background-color:#FFC480;"></div>
<div class="slide" style="background-color:#AA4560;"></div>
<div class="slide" style="background-color:#000000;"></div>
</div>
<button onclick="next()">volgende</button>
<script>
var section = document.getElementsByClassName("onscreen");
function next() {
if (section[0].nextElementSibling) {
section[0].nextElementSibling.className = "slide onscreen";
section[0].className = "slide";
var newTop = section[0].offsetTop;
window.scrollBy(0, newTop);
console.log(newTop);
}
}
</script>
</body>
</html>
These slides are all siblings. So offsetTop is going to be incrementally greater on each slide. Slide 1, 600px, slide 2, 1200px, and so on. window.scrollBy scrolls to the windows current position + the amount given. So if you are at window.scrollY = 0, and pass 600, you'll be at window.scrollY = 600. When you pass 1200 on the next go round, you'll be at window.scrollY = 1800! So now it appears as if you've skipped over slide 3, because you scrolled 2x a slide's height.
Possible answer, if you don't want the challenge of figuring the rest out:
If you have a hardcoded height for your slides, you could try passing a hardcoded scrollBy value as well. Or if you want to make your code a bit more flexible, you could query each slider for its height and pass that value instead. Then you can adjust your slide's height in css-land without breaking your js logic.
I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.
I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?
Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.
here is a fiddle, and code below. Thanks in advance for any help!
here is my html:
<div id="text">this is some text over the slider</div>
<div id="switch-it">
<div id="slide1">
<a href="link1.html">
<img src="hp_hero_010114_01.jpg" height="500" width="980" border="0" />
</a>
</div>
<div id="slide2">
<a href="link2.html">
<img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
</a>
</div>
</div><!--//END switch-it-->
and here is the jQuery
$(document).ready(function(){
$('#switch-it').after('<div id="switch" class="switch">').cycle({
fx: 'fade',
speed: 800,
timeout: 500,
cleartypeNoBg: true,
height:'500px',
width:'980px',
pager:'#switch',
pause:1,
before: function (prev, current, opts) {
var current_id = $(current).attr('id');
if( current_id.match("slide1")){
$('#text').css('color','white');
}
else if( current_id.match("slide2")){
$('#text').css('color','red');
}
else if( current_id.match("slide3")){
$('#text').css('color','blue');
}
else if( current_id.match("slide4")){
$('#text').css('color','green');
}
},
pagerAnchorBuilder: function(index, el) {
return '•'; // whatever markup you want
}
});
});
It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.
setTimeout(function () { ...change text color }, 400);
JSFiddle
EDIT OR
Add a transition to your css for the #text for the same amount of time as your speed
#text {transition: color .8s linear}
JSFiddle
You might want to update to Cycle2 plugin it has what you are looking for
link
Down in "misc. bits" look for the state variable named 'busy';
I have a gallery where I want the User to Open a Picture with Colorbox. (Then send the Picture with a Mail or Print it etc.)
This Site must be programmed dynamically because it has to work on an IPad too.
Now to the actual Problem:
This div should be shown in the Colorbox:
<div style = "display:none">
<div id="inline" style="height:100%; width:auto">
<img src="#" id="inline_img" style="max-height:90%; max-width:100%"/>
<div id="buttons">
<button > test </button>
<button > test1 </button>
<button > test2 </button>
</div>
</div>
</div>
And this is the Javascripit function where the div opens up in the colorbox.
$(function(){
//$('.element a').colorbox({});
$('.element a').click(function(){
// Using a selector:
$('#inline_img').attr('src',$(this).find("img").attr('src'));
$.fn.colorbox({
inline:true,
href:"#inline",
maxHeight:'90%',
maxWidth:'90%'
});
return false;
});
$('.element a').colorbox({
onComplete : function() {
$(this).colorbox.resize();
}
});
But the Colorbox always is much bigger than the Picture itself. The Colorbox must be as big as the Image and in the center of the screen.
I'm use the following code and resolve problem.
$('.colorBox').colorbox({
scalePhotos: true,
maxWidth: '100%'
});
That result makes sense to me. You gave colorbox a display:block element with no defined width and asked it to estimate the size, which of course will be 100% of the available width.
I'm using the cycle plugin on some divs, like this:
<div class="sections">
<div class="Section"> <img /> text </div>
<div class="Section"> <img /> text </div>
<div class="Section"> <img /> text </div>
</div>
all the .section divs have variable height, based on their contents.
How can I make cycle not to resize the container div (sections) to the largest child height? Instead I want the container to resize on every animation to the current child height.
ok, I managed to do it by hooking a function on 'after' event:
function onAfter(curr, next, opts, fwd) {
var $ht = $(this).height();
//set the container's height to that of the current slide
$(this).parent().animate({height: $ht});
}
found the info here:
http://forum.jquery.com/topic/jquery-cycle-auto-height
set containerResize option to 0 and try. More option details here.
I've done it a little bit different:
$('.cycle-list').cycle({
containerResize: 0,
before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
var container = $(this).parent();
container.css('height', Math.max(container.height(), $(nextSlideElement).height()));
},
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
$(this).parent().css('height', $(this).height());
}
});
My items had different height as well. In the before, it makes sure the container is big enough for the bigger of the 2 slides. In the after, it just resizes to the next slide.
This way it never over-flows because your container is too small.
note: this is for cycle 1
I am using jQuery cycle in several galleries with #next #prev navigation and a image counter output.
Now I am trying to connect all these galleries together. If the user reaches the final slide of gallery A (galleryA.html), the #next anchor should point to gallery B (galleryB.html) / the #prev anchor should point to gallery C (galleryC.html).
How can I combine my 2 functions to do that?
// slideshow fx
$(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 350,
prev: '#prev',
next: '#next',
timeout: 0,
after: onAfter
});
});
//image counter output
function onAfter(curr,next,opts) {
var caption =
(opts.currSlide + 1) + opts.slideCount;
$('#counter').html(caption);
}
html:
<div id="slideshow-container">
<div class="slideshow-nav"><a id="prev" href=""></a></div>
<div class="slideshow-nav"><a id="next" href=""></a></div>
<div id="slideshow" class="pics">
<img src="galleryA/01.jpg" />
<img src="galleryA/02.jpg" />
<img src="galleryA/03.jpg" />
<img src="galleryA/04.jpg" />
<img src="galleryA/05.jpg" />
<img src="galleryA/06.jpg" />
</div>
</div>
Not too familiar with the cycle plugin, but you could put something like this in function onAfter:
if(opts.currSlide == opts.slideCount) {
$("#next").attr("href","galleryB.html");
}
or you could try
if(opts.currSlide == opts.slideCount) {
$("#next").click(function() { document.location = "galleryB.html"; });
}
Untested, something along those lines?
Basically it only attaches the redirect behaviour onto #next after the last slide has been shown.. There might be an onFinish option or something, have you checked the docs?
You can have a look here :
http://helpdesk.toitl.com/?p=cycle_plugin
It is not so easy to integrate 2 synchronized cycles in the same page ... In this sample there is no reload of the page with location=... but the 2 galleries are managed using the different commands of the cycle plugin.
Regards,
Dominique VINCENT