How would I control a JCarousel inside another JCarousel? - javascript

Using JCarousel I currently have a carousel inside another carousel, which I can trigger to start playing slides by clicking on a play button that I created on the outside carousel. These are all loaded dynamically.
I'd like to have the inner carousel stop animating and go back to it's original loaded position when I click to change the slide of the outer carousel.
Here is what I have currently for manipulating JCarousel:
//outer carousel
$('#carousel').jcarousel({
auto: 0,
wrap: 'circular',
scroll: 1,
initCallback: carousel_initCallBack,
itemVisibleInCallback: {
onBeforeAnimation: gallerycarousel_itemfirst
}
// Info Box
$('.info').click(function() {
var itemid = $(this).attr('id').substring(5);
$.ajax({
url: 'php/get_case_studies.php?item=' + itemid,
dataType: 'json',
success: function(data) {
var infobox = $('#box_info' + data.data[0].id)
infobox.html('');
var content = '<div class="main_sec">'+data.data[0].main_desc+'</div><div class="sec_sec">'+data.data[0].sec_desc+'</div><div class="visit"><span class="box_num"><img src="img/visitor.png" alt="#" /> Visitors:</span>'+data.data[0].visitors+'</div><div class="avg"><span class="box_num"><img src="img/time.png" alt="#"/> Average time on site:</span>'+ data.data[0].avg_time +'</div>';
infobox.append(content);
$('.box_info').animate({left: '0px'}, 200);
}
});
});
function carousel_initCallBack(carousel) {
carousel.clip.hover(function() {
$('.gallery_control').stop().animate({"top": "454px"}, 200);
carousel.stopAuto();
}, function() {
$('.gallery_control').stop().animate({"top": "524px"}, 200);
$('.box_info').animate({left: '-302px'}, 200 );
carousel.startAuto();
});
$('#gallerycarousel_controls .btn_right').click(function() {
carousel.next();
return false;
});
$('#gallerycarousel_controls .btn_left').click(function() {
carousel.prev();
return false;
});
$('.grid').click(function() {
$('.gallery_control').animate({"top": "524px"}, 200);
$('#grid_view').fadeIn('slow');
carousel.stopAuto();
$('#grid_view').mouseleave(function() {
$(this).fadeOut('slow');
carousel.startAuto();
});
});
$('#carousel_slides .btn_item').click(function() {
carousel.scroll($.jcarousel.intval($(this).attr('id')));
$('#grid_view').fadeOut('slow');
$('.gallery_control').animate({"top": "454px"}, 200);
return false;
});
//this is the play button which generates and starts the inner carousel
$('.play').click(function() {
var itemid = $(this).attr('id').substring(5);
$('#int_carousel' + itemid).load('get_slideshow.php?slideshow&item=' + itemid, function() {
$('#int_carousel' + itemid).jcarousel({
auto: 3,
wrap: 'circular',
scroll: 1
});
});
});
}
I have tried adding a click function within the 'carousel_initCallBack' function to see if I can control the inner carousel like this:
$('#gallerycarousel_controls .btn_right').click(function() {
$('#int_carousel' + itemid).stopAuto();
});
The above doesn't work as I have tried and this would probably not bring the inner carousel back to the original position of the slide.
I have went on multiple different forums and have been searching everywhere I could on the internet and I am still not able to find any solid help or assistance. I am in dire need of assistance on this as I ran out of options. Please if someone can help me, I'd appreciate it so much. I am still new to web development and need guidance.

Related

Fancybox2 With Additional Ajax Loaded Content

Im using fancybox2 to display images in a lightbox. This works fine for images that are present initially. However the images that are loaded via ajax (an infinite scroll) do not display in fancybox.
The dark grey overlay appears, but there is no image.
From researching i understand i need to reinitialize fancybox - i have tried various ways of doing this after the additional content has loaded but its just not working.
My Fancybox script
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
"closeClick": "true",
"closeBtn": "true",
"overlay": "true",
"type": "image",
"nextClick": "false",
"scrolling": 'no',
helpers: {
overlay: {
locked: false,
css: {
'background': 'rgba(0, 0, 0, 0.50)'
}
},
keys: {
next: {
},
prev: {
}
},
}
});
});
</script>
Infinate Scroll Script
<script type="text/javascript">
var BlockNumber = 2; //Infinate Scroll starts from second block
var NoMoreData = false;
var inProgress = false;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && !NoMoreData && !inProgress) {
inProgress = true;
$("#loadingDiv").show();
$.post("#Url.Action("InfinatePopularScroll", "Wall")", { "BlockNumber": BlockNumber, "AlreadyShown": alreadyDone },
function (data) {
BlockNumber = BlockNumber + 1;
NoMoreData = data.NoMoreData;
$("#bookListDiv").append(data.HTMLString);
$("#loadingDiv").hide();
inProgress = false;
});
}
jQuery("abbr.timeago").timeago
//here is where i have tried to reinitialize
// i have tried copying the entire script posted in the code block above
// i have tried $(".fancybox").fancybox();
});
</script>
As you may be able to tell i suck at javascript - so any help or ideas would be appreciated.
Thanks in advance.
In the tips blog of fancybox exists an ajax example (#see http://fancybox.net/blog#tip5). In my opinion it should work with
$.fancybox.resize();
If not, maybe you can try to reinitialize the fancybox with a combination of the current data and the new content (like it is done in the example after the successful ajax call):
$.fancybox(data);

Update DIV contents with current jQuery Cycle slide

I'm having difficulties updating the contents of a DIV with the current slide of my jQuery Cycle slideshow.
Here is the slider function, it currently will output the current slide as an alert (and works).
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
alert("Current slide " + opts.currSlide);
}
});
The DIV is as follows:
<div id="test">Hello</div>
And the code I'm trying to use (to replace the end of the code above):
$(function (curr, next, opts) {
var test = document.getElementById("test");
test.innerHTML = opts.currSlide;
});
Any thoughts on why the DIV does not update with the current slide #?
Unfortunately, nothing happens. I'm still learning my way around JS, so any pointers are much appreciated! Thank you for your time.
That variable in opts object (opts.currSlide) is not defined outside of the cycle function/plugin
so you would have to pass it to the function
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
getCurrSlide(opts.currSlide);
}
});
}):
function getCurrSlide(curr){
$("#test").html(curr);
}
OK. I have made a fiddle and there are a few thing to note. First your action added to the initial cycle will be removed when you hit your buttons. Here I have made the initial cycle do what you want and have added a button that you might use to get a 'snapshot' Note the selector to get only the currently visible image.
the meat:
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
$('#testNum').html("Current slide " + opts.currSlide);
var $img = $("#slideshow img:visible").clone();
$("#test").html('').append($img); }
});
// The button will work after you click fast,slow, or reverse.
// The reason for that is the .cycle function above replaces it
// as fast as you can see it.
$("#btnCopy").on("click",function(){
var $img = $("#slideshow img:visible").clone();
$("#test").html('').append($img);
});

Submenu animation "pops up"

I have a menu with sub items inside it. In order to make animation effect I want, I need to retrieve sub-menu width,height and height of its first-child. Now my animation works ,but sometimes my sub-menu just "pops up" (it doesn't animate its width ).
Here is The Fiddle of the problem.
http://www.vasinternetposao.com/wordpressdevelopment/wp-content/themes/override/images/submenu_problem.png
I am using this code:
var j = jQuery.noConflict();
j(document).ready(function () {
j('ul.nav').removeClass('nav').addClass('jnav'); //Add jquery Class to our menu
j('ul.jnav li').hover(function () {
if (j(this).children('ul:first').hasClass('jsub-menu')) { //Let's check if "jsub-menu" Class is here
return false; //If it is ("jsub-menu" here) don't SlideDown...
} else { //Else slide down if no class
j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
}
}, function () {
j(this).find('ul:first').slideUp(500, function () {
j(this).removeClass('jsub-menu').addClass('sub-menu');
j(this).css({
'height': '',
'width': ''
});
});
});
j('ul.jnav ul.sub-menu a').hover(function () {
j(this).addClass('active');
if (j('.active').next('ul.sub-menu').length) { //If submenu exist...
j('.active').next('ul.sub-menu').css({
'visibility': 'hidden',
'opacity': '0',
'display': 'block'
}); //Show it so we can read its:
var get_width = j('.active').next('ul.sub-menu').outerWidth(true); //WIDTH
var get_height_of_first_child = j('.active').next('ul.sub-menu').children('li:first').outerHeight(true); //HEIGHT of its First Child
var get_submenu_height = j('.active').next('ul.sub-menu').outerHeight(true); //HEIGHT of our menu
j('.active').next('ul').removeClass('sub-menu') //Remove class from menu, add another class apply HEIGHT of FIRST CHILD and hide it again...
.addClass('jsub-menu').css({
'visibility': '',
'opacity': '',
'height': get_height_of_first_child + 'px',
'width': '0'
});
j('.active').next('.jsub-menu').animate({
width: get_width
}, 1000, function () { //Animate WIDTH
j('.active').next('.jsub-menu').animate({
height: get_submenu_height
}, 1000); //callback animate HEIGHT
});
} //End if
}, function () {
j('.active').removeClass('active');
});
});
I think that this is happening because my Slide Up/Down animations are conflicting with my animate with/height functions but I am not sure. I have tried to solve it by adding stop(),stop(true,true),stop(true,false) in numerous combinations but failed. I am trying to solve this for days now so you stackers are my only hope. Please help!
Thank you!!
I was finally able to replicate the error.
I wrote this code for you, to replace the code you have for the animation.
var animating = false;
function animate($elm, options, callback) {
if (animating)
return;
animating = true;
$elm.animate(options, 1000, function() {
animating = false;
if (callback != undefined)
callback();
});
}
Call it like this, from inside your hover callback.
animate(j('.active').next('.jsub-menu'),
{
'width': get_width,
'height' : get_submenu_height
});
Basically, it checks if another animation is already running, in which case it doesn't start it. The Flag is set to false when the animation stopped, and let's other animations go on.
You can also pass a callback to do something after the animation is completed, but in your case you don't need it, because you can animate the height and width in the same time.
I tested it for like a minute and it looked pretty smooth.
Here is the updated feedle: http://jsfiddle.net/gabrielcatalin/TNxJ4/1/
P.S. You may also want to use the $ sign instead of 'j' for jQuery wrappers.

get id of current item in jcarousel

Im looking to highlight the current dot pagination button in my carousel, so im attempting to add a class to whatever particular one is being used, for some reason this doesnt work, its adds the inactive class with no problems but doesnt add the active, so it doesnt seem to be recognising i.
Im only new to js, am I missing something obvious?
jQuery(document).ready(function() {
jQuery('#right-carousel').jcarousel({
start: 1, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:3,
vertical:true,
itemFirstInCallback: {
onBeforeAnimation: function(carousel, item, index, action, c, o, i, s ) {
if (carousel_2) {
carousel_2[action]();
}
i = (i - 1) % $('#right-carousel li').size();
jQuery('.jcarousel-pagination a').addClass('inactive');
jQuery('.jcarousel-pagination a:eq('+i+')').removeClass('inactive').addClass('active');
jQuery('.jcarousel-pagination a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('id')));
return false;
});
}
}
});
});
Just to add one more detail, the main issue seems to be that i is not defined even when I declare it inside the function.
This code should work if you put your pagination dots(.jcarousel-pagination) into the jcarousel container. It should also work with multiple carousels:
jQuery(document).ready(function() {
function mycarousel_initCallback(carousel, state) {
jQuery(carousel.container).find('.jcarousel-pagination a').bind('click', function() {
carousel.scroll(parseInt(jQuery(this).attr('id')));
return false;
});
jQuery(carousel.container).find('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery(carousel.container).find('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
}
function mycarousel_visibleCallback(carousel, item, index, state){
var dot = jQuery(carousel.container).find(".jcarousel-pagination a#" + index);
dot.siblings().removeClass("active");
dot.addClass("active");
}
jQuery('#right-carousel').jcarousel({
start: 1, // Configuration goes here
wrap: "circular",
scroll: 1,
auto:3,
vertical:true,
initCallback: mycarousel_initCallback,
itemVisibleInCallback: mycarousel_visibleCallback
});
});

jCarousel, Counter, how?

Im using this plugin: http://sorgalla.com/projects/jcarousel/
I want there do be a counter that can display:
1 of 4
When clicking the next button, it should say:
2 of 4 and so on...
The script is the default initialization:
<script type="text/javascript">
jQuery('#mycarousel').jcarousel();
</script>
However, haven't seen an example of this in the documentation ? So any help would be appreciated...
Thx
Uses something like this:
$(document).ready(function () {
var nmrElements = $('#mycarousel').children('li').length;
$('#mycarousel').jcarousel({
scroll: 1,
itemLoadCallback: function (instance, controlElement) {
if (instance.first != undefined) {
$('#label').html(instance.first + ' of ' + nmrElements);
}
}
});
});
Should be kind of impossible to realize with what is given there. Since it's just a ul that is hidden behind a div and only that ul element gets scrolled when you click on a button.
There is no semantic property that you could use to identify the currently visible object.
jQuery(document).ready(
function() {
function mycarousel_initCallback(carousel) {
// alert(this.mycarousel);
// alert("inside carousel");
// Disable autoscrolling if
// the user clicks the prev
// or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if
// the user moves with the
// cursor over the clip.
carousel.clip.hover(
function() {
carousel.stopAuto();
},
function() {
carousel.startAuto();
});
}
jQuery('#mycarousel').jcarousel({
auto : 2,
scroll : 1,
wrap : 'last',
initCallback : mycarousel_initCallback,
itemFallbackDimension: 300,
//size: mycarousel_itemList.length,
itemFirstInCallback:mycarousel_itemFirstInCallback
// itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
$(".jcarousel-prev").after("<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>");
function display(s) {
$('#myHeader').html(s);
};
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
display( idx +"<i> of </i>"+ $("#mycarousel li").length);
};
You can assign id-s to each image in carousel. And add some javascript to write the number from id of that images.
And also:
<script type="text/javascript">
function Callback_function(elem) {
document.write(this.id);
}
jQuery('#mycarousel').jcarousel({
scroll: 1,
initCallback: Callback_function,
});
</script>
it is simple, just open the following file:
sites\all\modules\jcarousel\js\jcarousel.js
and in line 146:
carousel.pageCount = Math.ceil(itemCount / carousel.pageSize);
change it to this: carousel.pageCount = Math.ceil(itemCount / 1);
it will work superb :D

Categories

Resources