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/

cross-fade images in jQuery

I have an image on a web page, and have it change when the jQuery slider is moved:
HTML:
<img src="images/flask_image1.png" alt="Isa lab" id="flask" />
Slider HTML:
<div id="slider1">
Script:
<script>
$(function() {
$( "#slider1" ).slider({
min: 0,
max: 4,
step: 1,
change: function(event, ui){
if(ui.value == 1){
$('#flask').fadeOut(100);
$('#flask').attr('src','images/flask_image2.png');
$('#flask').fadeIn(100);
}else{
$('#flask').attr('src','images/flask_image1.png');
};
}
});
});
</script>
However what this does is the image fades out, changes, then fades in which "works" but it momentarily fades to nothing.
Is there a way to cross-fade the 2 images?

here you go, quiet simple I suppose, much less code and difficulty comparing with implementing some plugins: http://jsfiddle.net/gcvqr/2/
HTML
<img src="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png" id="slider">
<button>Change Image</button>
jQuery
var stopWorking=false;
var firstSrc="http://macnetized.com/wp-content/uploads/2014/02/Apple_Logo_csh_by_wiimon.png";
var secondSrc="http://technicallyeasy.net/wp-content/uploads/2011/04/apple-logo.jpg";
$('button').click(function(){
if(!stopWorking){
stopWorking=true;
$('body').append('<img src="'+$('#slider').attr('src')+'" id="fadingImg">');
$('#fadingImg').css({
'position':'absolute',
'width':'400px',
'height':'400px',
'top':'0px',
'left':'0px'
});
if($('#slider').attr('src')==firstSrc){
$('#slider').attr('src',secondSrc);
}
else{
$('#slider').attr('src',firstSrc);
}
$('#fadingImg').fadeOut(1000,function(){
$('#fadingImg').remove();
stopWorking=false;
});
}
});
NOTE:
in order to make it work in your page, you need to give #fadingImg the style of your slider img, to be positioned right over it.

Avoid loading images in mobiles

I want to avoid loading an image on the website when the screen width is lesser than 1146px. I've tried to add the below CSS rule:
#media only screen and (max-width: 1146px) {
#img_cabecera2 {display: none;}
}
And of course, the image is not shown, but it is loaded. I want to load an image only if the screen width s more than 1146px.How could achieve it?
I don't mind if the solution uses CSS, Javascript, jQuery or PHP code.
Edit:
I've achieved it in this way:
template.html:
<div id="img_cabecera2">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="">
</div>
script.js:
$(function(){
/* Set img_cabecera2 size */
function set_src() {
var window_width = $(window).width();
if (window_width < 1147) {
$("#img_cabecera2").css({"display":"none"});
} else {
$("#img_cabecera2 img").attr('width', 300).attr('src', "/public/img/carrete.png").attr('alt', "logo").attr('height','auto');
$("#img_cabecera2").css({"top":"15px","left": "44%","display":"block"});
}
}
set_src();
$(window).resize(function() {
set_src();
});
/* ************************* */
...

I use this:
<!-- This image is a blank, 2*2 image -->
<img src="/images/transparant.png"
data-bigsrc="/images/big.jpg"
data-smallsrc="/images/small.jpg" />
With this as javascript
function getProperImageSource(){
var attr2use = $('body').outerWidth()>480 ? 'data-bigsrc' : 'data-smallsrc';
$('img[data-smallsrc], img[data-bigsrc]').each(function(i){
this.src = this.getAttribute(attr2use);
});
}
$(document).ready({
getProperImageSource(); // load images on init
$(window).on('resize', function(){
getProperImageSource();// again on resize
});
});
Might be handy to know: An image on display: none still loads, you just don't see it.
Also, removing images with (javascript-)functions can be slow aswell, because it can still trigger the downloading of the image, but because you removed the <img/> tag It wont be displayed, kinda a waste of time and resource :)

Add the css display:none; to the image and add this jQuery code:
function set_src() {
var window_width = $(window).width();
if (window_width < 1147) {
$("#img_cabecera2").hide();
} else {
$("#img_cabecera2").attr('src', BIG).show(); // Change to your image link
}
}
$(document).ready(function(){
set_src();
$(window).resize(function() {
set_src();
});
});
To avoid the image to be preloaded unnecessarily, while not just having an default empty src="" (omiting an image source is invalid, as I understand it), I found this post where one of the best solutions was to use this only 26 bytes big default source:
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D"

As has been mentioned, at the moment there is no way of doing this in pure CSS. i have made use of the picturefill script in the past and have found it quite reliable.

jQuery - How do I change view based on mouseOver?

I made the home page of my site so that when you mouse over the different service offerings that the related image would also display. However when Malsup's hosting of Cycle came off github the function was lost.
Here is the code I am using that worked before but no longer works correctly. The slideshow still cycles through, but the mouseover function does not work correctly.
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
pager : '#slideshow-nav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true,
speed: 1000,
delay: 3000,
timeout: 9000,
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.features ul li:eq(' + (idx) + ') a';
},
allowPagerClickBubble: true
});
});
</script>
What changes do I need to make to get it working again?
Thanks.

Try this 'command' of the plugin libary, it will do the trick.
<script type="text/javascript">
$(document).ready(function(){
$("#skills li").click(function(){
id = $(this).attr('id');
imgIndexToJump = id.substr(1); //extracting number as index from id
imgIndexToJump = parseInt(imgIndexToJump, 10);
$('.slideshow').cycle('goto', imgIndexToJump);
});
});
</script>
assign ids to ur list in skills like this and it will work.
<ul id="skills">
<li id="a0">
a1-data
</li>
<li id="a2">
a1-data
</li>
</ul>

Is this possible to make this code randomize the images for the slideshow

Here i have some code which is my slideshow and what i am wondering is whether you can randomize the images so it doesn't start on the same image when you refresh the page.
Please provide me with useful info and if you wish to show me feel free.
THNAKS GUYS! :)
<html>
<head>
<title>JQuery Cycle Plugin Sample</title>
<link rel="stylesheet" type="text/css" media="screen" href="../screen.css" />
<script type="text/javascript" src="../js2/jquery-1.3.js"></script>
<script type="text/javascript" src="../js2/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 2000,
timeout: 2000
});
});
</script>
</head>
<body>
<div id="myslides">
<img src="../images/capitol.jpg" />
<img src="../images/flowers.jpg" />
<img src="../images/countryscene.jpg" />
<img src="../images/heartkush.jpg"/>
</div>
</body>
</html>

You may want to hold image urls in a variable (or retrieve them from your div and clear the div afterwards), say
var images = ['x.jpg', 'y.jpg', 'z.jpg'];
(or even better - do some preloading). Then do a random sort
function randomOrd(a,b)
{
return (Math.round(Math.random())-0.5);
}
images.sort(randomOrd);
then dynamically add images
for (var i in images)
{
$('#myslides').append('<img src="'+images[i]+'" />');
}
and then do the slideshow. The final script may look like this:
<script>
function randOrd(a,b)
{
return (Math.round(Math.random())-0.5);
}
$(document).ready(function(){
var images = [];
/* retrieve images */
$('div#myslides img').each(function(){
images.push($(this));
});
/* clear the div */
$('div#myslides').empty();
/* do the random sort of images */
images.sort(randOrd);
/* append to the div sorted images */
for (var i in images)
{
$('div#myslides').append(images[i]);
}
/* do the slideshow */
$('#myslides').cycle({
fx: 'fade',
speed: 2000,
timeout: 2000
});
});
</script>

$("#myslides img").each(function() {
if (Math.random() >= 0.5) { $("#myslides").append($(this)); }
});

This is just one of the many options that jQuery cycle has.
Add random: true to the options like so:
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 2000,
timeout: 2000,
random: true
});
});