Develop Reference

Fancybox with owl carousel misses CSS

I'm building a fancybox modal(v3) with inside it two owl carousels(v2). It's used as a product quick view function.
The problem I'm facing is that the second carousel (used for the thumbs) doesn't have core css styles applied, while the carousel is actually initialized.
So the two carousels are initialized but one just won't use styling from the actual owl-carousel.css stylesheet.
I'm completly confused.
I've created a fiddle here with the actual problem.
My html
<div id="quick-shop-modal" class="cd-quick-view" style="display:none;">
<div class="product-images-slider">
<div class="slider-container"></div>
<div class="thumbnail-slider-container"></div>
</div>
</div>
Quick shop
Jquery
$(document).ready(function() {
$(".quick_view").on('click', function() {
var url = 'some-url'
$.fancybox.open({
touch: false,
src: '#quick-shop-modal',
type: 'inline',
beforeShow: function() {
quick_shop(url)
}
});
});
});
function quick_shop(url) {
var $modal = $('#quick-shop-modal');
$.getJSON(url, function(data) {
$modal.data('product', data.product);
var product = data.product;
var images = '';
$.each(product.images, function(index, image_id) {
images += '<div class="item"><div class="content"><img src="https://via.placeholder.com/350x150" class="img-responsive"></div></div>';
});
$modal.find('.slider-container').html('<div id="slider" class="slider owl-carousel">' + images + '</div>')
$modal.find('.thumbnail-slider-container').html('<div id="thumbnailSlider" class="thumbnail-slider">' + images + '</div>')
$modal.find('.slider').owlCarousel({
loop: false,
nav: false,
items: 1
}).on('changed.owl.carousel', function(e) {
$modal.find('.thumbnail-slider').trigger('to.owl.carousel', [e.item.index, 300, true]);
});
$modal.find('.thumbnail-slider').owlCarousel({
loop: false,
margin: 10,
nav: false,
items: 3,
stagePadding: 40
}).on('click', '.owl-item', function() {
$modal.find('.slider').trigger('to.owl.carousel', [$(this).index(), 300, true]);
}).on('changed.owl.carousel', function(e) {
$modal.find('.slider').trigger('to.owl.carousel', [e.item.index, 300, true]);
});
});
}

1) I do not think that anyone would be able to help you without seeing live demo and probably no-one will spend time to create it for you.
2) From you code, it seems that changing one slider would trigger change callback on both sliders. IF that is true, than that could cause the issues.
3) It is not possible to tell what role of fancybox is here just by looking at those pieces of code (e.g., what is webdinge_quick_shop doing; if #webdinge-quick-shop-modal exists, then fancybox should work fine)
Edit & Answer to updated question -
Your 2nd own carousel is missing owl-carousel classname, simply add .owl-carousel to .thumbnail-slider element, see http://jsfiddle.net/zLfnmrx1/

Switch vertical carousel (desktop) to horizontal carousel in mobile

They know a one plugin that let me change/transform a vertical (desktop view) carousel to a horizontal carousel on mobile devices?
Now I'm working with slick plugin but I can't get the result that I need, this is my JS code:
$('.demo-slider).slick({
vertical: true;
});
var windowWidth = $(window).width();
if(windowWidth < 768){
$('.demo-slider').slick('unslick',function(){
$('.demo-slider).slick({
vertical: false;
});
});
}

$('.demo-slider).slick({
vertical: true,
responsive: [
{
breakpoint: 767,
settings: {
vertical: false
}
}]
});
Slick have own responsive breakpoints. This will be work much better

I think where you are going wrong is you're initializing slick() twice (you also forgot closing ' on your jQuery selectors). I would switch the faux media query to be out of slick()'s initialization, like this:
// 1- Get window width
var windowWidth = $(window).width();
// 2- For all devices under or at 768px, use horizontal orientation
if(windowWidth <= 768) {
$('.demo-slider').slick({
vertical: false,
});
}
// 3- For all devices over 768px, use vertical orientation
else {
$('.demo-slider').slick({
vertical: true,
});
}
*note, I've never used slickslider, just looking at your JS.

Fade in on scroll doesn't work in mobile browser

I am using this code to add class "show" to my images so when a person scrolls down, images show up. It works on desktop (tested in chrome, with mousescroll and with touch simulation) but it does not work in chrome on mobile device. Swipe(scroll with touch) is not detected. Page goes down but images dont get that .show. I am using this inside fullpage.js+iscroll.js page.
You can try this at: http://www.vinarijapantic.com/apps/onePage/project.html
Any ideas?
jQuery(document).ready(function($) {
function showImages(el) {
var windowHeight = jQuery(window).height();
$(el).each(function() {
var thisPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow + windowHeight - 250 > thisPos) {
$(this).addClass("show");
}
});
}
/*full page library */
var SCROLLING_SPEED = 600;
$('#fullpage').fullpage({
scrollOverflow: true,
css3: true,
controlArrows: true,
loopHorizontal: false,
easing: 'easeInOutCubic',
easingcss3: 'ease-out',
autoScrolling: true,
scrollingSpeed: SCROLLING_SPEED,
//anchors:['s0', 's1', 's2', 's3']
afterLoad: function(anchorLink, index) {
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
if (slideIndex == 0) {
$('.slide-' + index).addClass('show');
} else {
$('.slide').removeClass('show');
}
if ($('.bigScroll').hasClass('active') && $('.bigScroll').closest('.section').hasClass('active')) {
console.log($(".bigScroll").height());
showImages('.bigScroll img');
$('.fp-scrollable').scroll(function() {
showImages('.bigScroll img');
});
}
}
});
});

Enable JavaScript on mobile web
There are situations where the browsers throw an error like
"when trying to access ------- on a mobile device"
it means the web browser on your device needs to have JavaScript turned on before you load the page.
To turn on JavaScript, open the settings menu for your mobile web browser and look for the JavaScript option.

It's not worth the technical debt to build your own lazy loading plugin (which is a colloquial name for what you are trying to do). Use a contributed jQuery plugin instead.
I've used this one with great success in the past: https://github.com/tuupola/jquery_lazyload
It's really easy to use - just add an data attribute to your HTML img tag and instantiate the plugin with a simple jQuery reference.
HTML:
<img class="lazy" data-original="img/example.jpg">
JS:
$("img.lazy").lazyload();

Content inside fancy box need to be responsive

I would like to create a gallery that is inside a fancy box , so firstly I downloaded all the content of the gallery and appended to the html container.
<div id="popup" style="display:none;"><div class="galleria"></div></div>
The jquery part
$("#hidden_content").instagram({
clientId: blockInstaSettings.clientId
, hash: hash
, userId: blockInstaSettings.userId
, next_url: insta_next_url
, show: 10
, image_size: image_size
, onComplete: function (photos, data) {
var album_html = "";
$.each(photos, function( index, val ) {
album_html += "<img src='" + val.images.standard_resolution.url + "' data-title='' data-description='" + val.caption.text.replace("'","’") + "' longdesc='" + val.link + "'>";
});
$(".galleria").html(album_html);
$('#block_instagram').on('click', function () {
openPop();
return false;
});
}
});
Notice that I set up the listener in the button that show the fancybox
function openPop(){
$.fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
'href' : '#popup'
});
Galleria.run('.galleria', {
transition: 'fade',
popupLinks: true,
show: no,
extend: function(options) {
Galleria.get(0).$('info-link').click();
}
});
}
Attempted to call galleria.run when fancybox's afterShow event; but it is still the same.
Also for CSS, it need to be :
.galleria{
width:700px;
height:500px;
}
Otherwise ,it can not generate the gallery
How to fix that?
Reference
My site:
http://internal001.zizsoft.com/be_pure/
(When you scroll to bottom, there is a slider showing instagram photos, click on the photo and you will see the gallery)
The plugin used:
http://galleria.io/
http://fancyapps.com/fancybox/

As others mentioned in the commants all those plugins you are using are responsive already. When i visit your site if i resize the window after opening the fancybox its not resized as defined as "responsive". I thought this is what you are worrying about. You can invoke this by resize galleria on window resize event. Please refer this resize script for galleria to achieve. Thanks
Update: (Essential code blocks from the referred link)
to re-initialize the galleria while window resize.
First, set up the resize function:
function ResizeGallery() {
gWidth = $(window).width();
gHeight = $(window).height();
gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
$("#gallerycontainer").width(gWidth);
$("#gallery").width(gWidth);
$("#gallery").height(gHeight);
// Reload theme
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}
Then bind it to the window resize event:
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});
This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:
var gcount = Galleria.get().length;
if (gcount > 1) {
Galleria.get().splice(0, gcount - 1);
}
Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.

every thing is responsive and works good. Elaborate your problem .
if you want your popup thumbnails appear in middle of your popup use the following code
.galleria-thumbnails {
text-align: center;
width: 100% !important;
}
.galleria-image {
display: inline-block;
float: none !important;
}

I found that using the javascript to handle that worked best for me you could have your script calculate height and then do something like this where you initialized fancybox
fitToView : true,
autoSize : true,
width : 100%,
height : 'auto',
you can play with fitToView and autoSize till you get the desired effect much like pinterest

you can do this with a simple css trick .
in the responsive media screen you have to set the css as
.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img {
background-size: 100% auto !important;
}

Jquery tools slideshow - changing effect on window resize

I'm using this plugin for slideshow: http://jquerytools.org/demos/tabs/slideshow.html
I want to change slideshow effect on window resize. My code: http://jsfiddle.net/genesiss/5L2CN/5/
var initSlideshow = function() {
var effect = 'fade';
if ($(window).width() < 300) {
effect = 'default';
}
$(".slidetabs").tabs(".images > div", {
effect: effect,
fadeOutSpeed: "slow",
rotate: true
}).slideshow({interval: 100});
};
$(function() {
initSlideshow();
$(".slidetabs").data('slideshow').play();
$(window).resize(function () {
$(".slidetabs").data('slideshow').stop();
$(".slidetabs").tabs('destroy');
initSlideshow();
$(".slidetabs").data('slideshow').play();
});
});
It seems that slideshow effect is always the same - one that is set at first initialization. You can see that by resizing 'Result' window in jsfiddle and noticing that it still has 'fade' efect (two slides on the screen at the same time, one fading away).
How could I change slideshow effect after first initialization?