Fancy Box is not working with Box slider - javascript

I am doing a project for one of my client. I am using box slider for the banner and it works fine. For a specific page on the website I am also trying to use fancy box for image light box.But It doesn't work however box slider is still working. Here is the head tag.
<!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#single_2").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'float'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
And here is the the element where I am trying to use fancy box
<a href="images/lightbox/groups-size-option.jpg" target="_blank" id="single_2" title="Work Shops Chart">
<img src="images/group-size.jpg" alt="" border="0" />
</a>
when I disable box slider fancy box works. But when it is active fancy box doesn't work. Please help asap.Thanks

Related

JQuery dialog not displaying content on upgrade to Bootstrap 4

I am working on upgrading our website from Bootstrap 3 to Bootstrap 4. I have a JQuery dialog that no longer works when I change to Bootstrap 4- the content of the dialog is not displayed. The buttons in the JQuery dialog definition are, but nothing else. Any ideas are appreciated!
Bootstrap 3 dialog:
Bootstrap 4 dialog:
var themedialog = $("#theme-change-form").dialog({
autoOpen: false,
height: 'auto',
width: 450,
modal: true,
buttons: {
"Update Theme": updateTheme,
Cancel: function() {
themedialog.dialog("close");
}
},
close: function() {
$('.subtheme-button').removeClass('active');
$('.subtheme-button.selected').addClass('active');
}
});
//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
themedialog.dialog('open');
});
function updateTheme() {
console.log('theme udated');
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<div hidden id="theme-change-form">
<div>
<h3>Air</h3>
<button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
</div>
<!--more buttons here in the same format as above-->
</div>
<button id="change-theme">Change Themes</button>
Thank you!
Remove the hidden attribute on the dialog element. Bootstrap has CSS that sets display: none on elements with that attribute, and it doesn't seem necessary anyway. Your browser's document inspector is a great tool for seeing things like that.
var themedialog = $("#theme-change-form").dialog({
autoOpen: false,
height: 'auto',
width: 450,
modal: true,
buttons: {
"Update Theme": updateTheme,
Cancel: function() {
themedialog.dialog("close");
}
},
close: function() {
$('.subtheme-button').removeClass('active');
$('.subtheme-button.selected').addClass('active');
}
});
//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
themedialog.dialog('open');
});
function updateTheme() {
console.log('theme udated');
}
body {
padding: 30px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<div id="theme-change-form">
<div>
<h3>Air</h3>
<button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
</div>
<!--more buttons here in the same format as above-->
</div>
<button id="change-theme">Change Themes</button>

Slide a hidden bootstrap card from right to left on button click

I have a bootstrap4 `card' which is hidden and I want to display it with slide right to left slow animation on button click. Below is the markup
<div class="card" id="setup" style="display:none;">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
Below is click event
$("#Finalize").click(function () {
$('#setup).show();
$("#setup").animate({ left: '0' }, 'slow');
});
With the above jquery code, I am just able to display the card, its animation effect is not working? What's wrong and how to make it work?
This worked for me:
$(function(){
$("#Finalize").click(function () {
$(".cardcontainer").show();
var left = $('#card').offset().left;
$("#card").css({left:left}).animate({"left":"0px"}, "slow");
});
});
.cardcontainer{
position:relative;
height: 220px;
display:none
}
.card{
position:absolute !important;
width:200px;
right:0px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="cardcontainer">
<div class="card" id="card">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
</div>
<div>
<a id="Finalize" href="#" class="btn btn-primary">Go somewhere</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Ok, here is the html:
<div class="card animatable" id="setup" style="display: none;">
<div class="card-header">Settings</div>
<div class="card-body">
Setup
</div>
</div>
</div>
here is the CSS (we need to define a width for the card. I just put 500px, you can make it however big you want it obviously)
#setup {
width: 500px;
}
And here is the javascript.
$("#Finalize").click(function () {
if ($('#setup').hasClass('animatable')) {
$('#setup').show();
$('#setup').css('margin-left', $(window).width());
$("#setup").animate({ right: "+=" + $(window).width()}, 'slow');
$('#setup').removeClass('animatable');
}
});
Note I know you said you didn't want a margin. According to the HTML code you posted, the card will appear on the left side of the screen with the DOM loads. So if you run the animation, it will fly off the screen because it's going to move to the left when it's already placed at the left. So we need to move it to the right, hence my margin-left. Now if you absolutely cannot have a margin, you can give the card an absolute position, and just left it over to the right side of the screen. Also, we need to give it a width so that the card won't crumple up when we move it to the right side of the screen.
I hope this helps!

fancybox, open gallery on click

I`m not sure, maybe this question is already answered or there is some similar, but i hope that this will be the easiest way for me, to figure out this problem.
So i have this code in my "head" tag:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#fb_man").click(function() {
$.fancybox.open([
{
href : 'both.jpg',
title : 'My title'
}, {
href : 'front.jpg',
title : '2nd title'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
And this one in my body:
<a id="fb_man" href="javascript:;"><img src="img/eyey.png"></a>
I want to open a gallery of 2 images (both.jpg and front.jpg) on click on eyey.png, but i get this error:
Uncaught TypeError: $.fancybox.open is not a function
How can i solve this error ?
just change this part from
$.fancybox.open([
to
$.fancybox([

FancyBox code issue

I have downloaded fancyBox from here:
http://fancyapps.com/fancybox/#license
and this is the code I have in my 'test' Web page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>fancyBox</title>
<meta charset="utf-8">
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/* Different effects */
// Change title type, overlay closing speed
/* Button helper. Disable animations, hide close button, change title type and content */
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Button helper</h3>
<p>
<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>
I think I have the paths right on my server, but this is what I see:
http://www.bayingwolf.com/site_pop_up/image_pop.html
instead of the fancyBox (under Button Helper) on their site.
What am I doing wrong, please?
Thanks.
Blue
I'm getting a 404
"NetworkError: 404 Not Found - http://www.bayingwolf.com/site_pop_up/source/jquery.fancybox-1.3.4.pack.js"
Few problems
1) jquery.fancybox-1.3.4.pack.js is not loading.. (404 error.) You might want to check the path correctly
2) closing tags are missing for $(document).ready(function(){
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' +
this.group.length +
(this.title ? ' - ' + this.title : '');
}
});
})
</script>
Advice
Indent the code properly to avoid subtle bugs.

Galleria scaling error

I am using galleria with the flickr plugin but it is not displaying the images correctly, weirdly some of them display fine and others are scaled and the right and left or top and bottom are cut of.. how can I change this
Here is the HTML for the actual galleria on the page
<!DOCTYPE html>
<head>
<style>
/* Demo styles */
html,body{background:#222;margin:0;}
body{border-top:4px solid #000;}
.content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:840px;margin:20px auto;}
h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;}
p{margin:0 0 20px}
a {color:#22BCB9;text-decoration:none;}
.cred{margin-top:20px;font-size:11px;}
/* This rule is read by Galleria to define the gallery height: */
#galleria{height:620px;}
</style>
<!-- load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- load Galleria -->
<script src="http://www.levencruisingclub.com/sites/all/libraries/galleria/galleria.js"></script>
<!-- load flickr plugin -->
<script src="http://www.levencruisingclub.com/sites/all/libraries/galleria/plugins/flickr/galleria.flickr.js"></script>
</head>
<body>
<div class="content">
<!-- Adding gallery images. This is just a container for the dynamic flickr images -->
<div id="galleria"></div>
<p class="cred">Made by Galleria.</p>
</div>
<script>
// Load the classic theme
Galleria.loadTheme('/sites/all/libraries/galleria/themes/twelve/galleria.twelve.min.js');
// Initialize Galleria
$('#galleria').galleria({
flickr: 'group:87072910#N00',
});
flickrOptions:({
max: 100,
size: 'big',
sort: 'date-posted-asc'
});
</script>
</body>
</html>
Try the imageCrop option:
{
imageCrop: false
}

Categories

Resources