I cant find solution for this. Use bs modal + slick slider and load content to modal dynamicly. Like this
$(document).ready(function() {
$(".mwrap").on("click", function() {
var img, desc, value, elements;
img = $("img", this).attr("src");
desc = $("p", this).html();
value = $("img", this).data("value");
elements = $.map($('img[data-value="' + value + '"]'), function(img) {
return $("<div/>", { //get list of images for slider in modal
html: $(img).clone()
})
})
$(".wimg").attr("src", img); //add data
$(".wdesc").html(desc);
$(".wslider").html(elements);
});
$("#myModal").on("shown.bs.modal", function() {
$(".wslider").slick({ //run slider
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true
});
$('html').removeClass('.hide-slider');
});
$("#myModal").on("hide.bs.modal", function() {
$(".wslider").slick('destroy').html(""); //destroy slider
})
});
How i can open another modal and close current by click on slider element?
Related
I am redesigning my website, in each page I am showing a list of images, if you clcik on it a modal window pops up covering the entire page and displaying a bootstrap carousel vertically and horizontally centered. Everything works fine. I have just tried to enable the touch swipe for the mobile but it doesn't work anymore.
This is the js code that works
/* copy loaded thumbnails into carousel */
$('.immagini .thumbnail').on('load', function() {}).each(function(i) {
if (this.complete) {
var item = $('');
var itemDiv = $(this).parents('div');
var title = $(this).parent('a').attr("title");
item.attr("title", title);
$(itemDiv.html()).appendTo(item);
item.appendTo('.carousel-inner');
if (i == 0) { // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({
interval: false
});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function() {
$('.modal-title').html($(this).find('.active').attr("title"));
})
$('.immagini .thumbnail').addClass("point");
/* when clicking a thumbnail */
$('.immagini .thumbnail').click(function() {
var idx = $(this).parents('div').index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
});
$(".myModal").on('show.bs.modal', function() {
setTimeout(function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
$(".modal").addClass("modal-fullscreen");
$(".modal-body").removeAttr("style");
}, 0);
});
$("#myModal").on('hidden.bs.modal', function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
});
// Vertical centered modals // you can give custom class like this //
This is the bit that I have added to enable the swipe
$(document).ready(function() {
$("#modalCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#modalCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
Can you try this. You may need to reinitialize carousel.
$(".myModal").on('show.bs.modal', function() {
setTimeout(function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
$(".modal").addClass("modal-fullscreen");
$(".modal-body").removeAttr("style");
$('#modalCarousel').carousel()
$("#modalCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#modalCarousel").swipeleft(function() {
$(this).carousel('next');
});
}, 0);
});
Try using jQuery 'on' instead, this may prevent the need for re-initialising the carousel
Query( ".selector" ).on( "swiperight", function( event ) { ... } )
Im working on a slider that contains two synced owl-sliders.
sync1 is main slider and sync2 is thumbnails slider. When I click on one of elements of second slider sync1 goes to proper slide.
Now goes my issue:
When user clicks on any of thumbnail a green border should appear on clicked elemment and should stay there until another element is clicked.
I've tried to use jquery .addClass and .css but nothing happens.
I think that I should add div with "position: absolute" that holds up to clicked element, but I don't know how to do it. Please help! :)
Here is my js
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var index2=0;
var flag=true;
var slides = sync1.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout:5000,
autoplayHoverPause:true,
nav: false,
mousedrag: false,
touchdrag: false,
pulldrag: false
});
$(document).on('click', '.prevbutton, .nextbutton',function() {
sync1.trigger('stop.owl.autoplay');
});
sync1.on('changed.owl.carousel', function(event) {
var index1=event.item.index;
var index11 = index1-2;
//console.log("index1", index1)
//console.log("index11", index11);
sync2.trigger("to.owl.carousel", [index11, 100, true]);
});
$('.nextbutton').click(function() {
//console.log(sync1);
sync1.trigger('next.owl.carousel');
});
$('.prevbutton').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
//console.log(sync1);
sync1.trigger('prev.owl.carousel', [500]);
});
/* thumbnails*/
var thumbnails= sync2.owlCarousel({
items: 6,
loop: true,
autoplay: false,
mousedrag: false,
touchdrag: false,
pulldrag: false,
addClassActive: true
});
/*buttons*/
$('.nextbutton2').click(function() {
sync2.trigger('next.owl.carousel');
});
$('.prevbutton2').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
sync2.trigger('prev.owl.carousel', [500]);
});
sync2.trigger("to.owl.carousel", [index2, 100, true]);
sync2.on('changed.owl.carousel', function(event) {
index2=event.item.index;
//console.log("index2", index2);
index22=index2-1;
// sync1.trigger("to.owl.carousel", [index22, 100, true]);
});
// console.log("index2", index2);
sync2.on('click', '.item', function(e) {
e.preventDefault();
sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index()-6, 300, true]);
// console.log("clicked index", $(e.target).parents('.owl-item').index())
});
$('#stopcontainer').on('mouseover', function(){
if ($('#stopcontainer:hover').length != 0) {
flag=true;
console.log("flaga", flag);
}
if (flag==true) {
sync1.trigger('stop.owl.autoplay');
console.log("mousein");
}
}).on('mouseleave', function() {
setTimeout(
function()
{
if ($('#stopcontainer:hover').length == 0) {
flag=false;
console.log("flaga", flag);
}
if(flag==false){
console.log('mouse leave');
sync1.trigger('play.owl.autoplay');
}
}, 5000)}
);
});
Here is the solution:
sync2.on('click', '.owl-item', function(e) {
e.preventDefault();
$('.some-class').removeClass('active');
$(this).find('.some-class:first').addClass('active');
});
There is empty div with "some-class" inside carousel item, and when you click on this element class "active" is added
I'm trying to get to work a remote content for bootstrap 3 popover and I cant get the content to show.
My html:
<a class="btn-link mchat-link hidden-xs rule" href="javascript:void(0)" id="oneData" data-toggle="popover" title="{L__HELP}" data-remote="{T_SUPER_TEMPLATE_PATH}/the_rules.html" title="{L_HELP}" value="{L_HELP}"><i class="icon-moon-question"></i></a>
my js:
$('#oneData').popover({placement:'top', html:true});
what am I missing been trying this for hours and no success
There is no data-remote attribute for Bootstrap popover, but we can use it like this to load remote data into a Popover:
html
link
js
$('*[data-remote]').on('mouseover', function() {
var el = $(this);
$.get(el.data('remote'),function(html) {
el.popover({
content: html,
html : true,
placement: 'right'
});
el.popover('show');
});
});
I needed the popover to stay open until the user hovers out of the link or out of the popover so I added some magic to do just that
js (with stay open functionality)
$('*[data-remote]').on('mouseover', function() {
var el = $(this);
$.get(el.data('remote'),function(html) {
el.popover({
content: html,
html : true,
placement: 'right'
});
el.popover('show');
$(".popover").on("mouseleave", function() {
var el = $(this);
el.popover('hide');
});
el.popover().on("mouseleave", function() {
var el = $(this);
setTimeout(function() {
if (!$(".popover:hover").length) {
el.popover("hide")
}
}, 300);
});
});
});
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.
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