So I am trying to use both Revolution Slider and prettyPhoto here - http://vgoford.com/index3.html
But there is a possible conflict in their jQuery. The prettyPhoto refuses to work. Any idea what could be the issue?
Here's the code for both of them -
<!-- Revolution Slider -->
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.revolution.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/revolution-settings.css" media="screen" />
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:890,
startheight:450,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:200,
navigationType:"bullet", //bullet, thumb, none, both (No Shadow in Fullwidth Version !)
navigationArrows:"verticalcentered", //nexttobullets, verticalcentered, none
navigationStyle:"round", //round,square,navbar
touchenabled:"on", // Enable Swipe Function : on/off
navOffsetHorizontal:0,
navOffsetVertical:20,
stopAtSlide:-1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:-1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
</script>
<!-- /Revolution Slider -->
and
<!-- PrettyPhoto -->
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',theme:'pp_default',slideshow:4000, opacity: 0.50, deeplinking: false, overlay_gallery: false, autoplay_slideshow: false});
});
</script>
<!-- /PrettyPhoto -->
I believe the issue is here:
var tpj=jQuery;
tpj.noConflict();
If you're going to use noConflict then you have to be sure it's consistent because it will apply to jQuery as a whole.
In almost all cases that I've typically done:
$('selector') // normal way
jQuery('selector') // safe way
var $js = jQuery.noConflict(); // safe way
$j('selector')
Another good alternative would be:
(function($) {
// document.ready code can go here
// $('selector').hide(); for example
})(jQuery);
Hope this helps!
Try to Modify your files in order in your page like as follows:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/revolution-settings.css" media="screen" />
<script type="text/javascript" language="javascript">
// Revolution Slider
jQuery(document).ready(function() {
if (jQuery.fn.cssOriginal!=undefined)
jQuery.fn.css = jQuery.fn.cssOriginal;
jQuery('.fullwidthbanner').revolution({
delay:9000,
startwidth:890,
startheight:450,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:200,
navigationType:"bullet", //bullet, thumb, none, both (No Shadow in Fullwidth Version !)
navigationArrows:"verticalcentered", //nexttobullets, verticalcentered, none
navigationStyle:"round", //round,square,navbar
touchenabled:"on", // Enable Swipe Function : on/off
navOffsetHorizontal:0,
navOffsetVertical:20,
stopAtSlide:-1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0,....
stopAfterLoops:-1, // Stop Timer if All slides has been played "x" times. ....
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
// PrettyPhoto
jQuery(document).ready(function(){
jQuery("area[rel^='prettyPhoto']").prettyPhoto();
jQuery(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
animation_speed:'fast',
theme:'pp_default',
slideshow:4000,
opacity: 0.50,
deeplinking: false,
overlay_gallery: false,
autoplay_slideshow: false
});
});
});
</script>
Related
Need to stop crop once the user drags cursor out of the image while cropping.
My problem is once the user moves out of the image and comes back the cropped corners are moved away from the cursor. which should not happen.
Below is the simple demo what I have created.
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/main.css">
<div class="img-container">
<img src="https://fengyuanchen.github.io/cropper/images/picture.jpg" alt="" class="">
</div>
<script type="text/javascript" src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<script type="text/javascript" src="https://fengyuanchen.github.io/cropperjs/js/main.js"></script>
You can achieve this by setting the viewMode to 1 (default = 0)
Example with the jQuery cropper plugin:
var $image = $("#PreviewImage");
$image.cropper({
viewMode: 1,
crop: function(event) {
// do something
}
});
I have looked at many examples for passing data from Javascript to Magnific pop-up, when the mouse leaves the screen the pop-up will fire 1 time and then you will have to refresh the page.
However I cannot get the pop-up to animate or have and effect.
I would like to use mfp-3d-unfold or mfp-zoom-out as an effect and #test-popup div id as the content
Could someone help me how to fix the code.. I am really confused at this point.
TKS
<html>
<head>
<title> Test leave Screen New 2</title>
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
<link rel='stylesheet prefetch' href='magni/magnific-popup.css'>
<link rel="stylesheet" href="magni/magnimain1.css" media="all">
<script src="magni/prefixfree.min.js"></script>
<script>
visitchecka = 0;
$(document).on('mouseleave', leaveFromTop);
function leaveFromTop(e){
if( e.clientY < 0 ) // less than 60px is close enough to the top
if (visitchecka < 1 ) {
visitchecka++;
visitchecka++;
// window.location='#test-popup'.css;
$.magnificPopup.open({
items : {
mainclass: 'mfp-zoom-out',
src: '#test-popup',
},
type: 'inline',
});
}
}
</script>
</head>
<body>
<div class="links">
<h4>Text-based:</h4>
<ul id="inline-popups">
<li>3d unfold</li>
<li>Zoom-out</li>
</ul>
Popup with "hinge" close effect (based on animate.css)
</div>
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.foofoo</div>
<script src='magni/jquery.min213.js'></script>
<script src='magni/jquery.magnific-popup.min.js'></script>
<script src="magni/index.js"></script>
</body>
</html>
You can do it by using .click() simply call your element to trigger click and popup will open on window leave... here I've made an example for you..
$('#clickme').magnificPopup({
delegate: 'a',
removalDelay: 500,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
midClick: true
});
// this is what you need
$(".main").mouseleave(function(){ // your window or parent element you can use document if you want
$('.popup').click(); // trigger click for popup
});
I have 2 scripts that seem to be in conflict, so that the Previous and Next buttons do not show on the Colorbox overlay (the Close button is there and works fine). My css calls are correct and I rule that out as an issue anyway by adding:
#cboxPrevious, #cboxNext {display:block !important; overflow:visible;}
which then shows the next and previous graphic buttons but they do not function when clicked (this has since been deleted).
The Chrome javascript console gives me this message:
Error: cboxElement missing settings object jquery.colorbox.js:204
Lastly, if I comment out Animated Repsonsive Grid, the controls perform correctly on the Colorbox overlay.
I did try to put the Colorbox script in noConflict mode, but that only disabled the Animated Responsive Grid.
You can see my test page at http://www.flowerlandshop.com/photostest.html
edit: here is my head code:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
<link rel="stylesheet" href="http://www.flowerlandshop.com/css/colorbox.css" />
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".group1").colorbox({rel:'group1', open:true});
});
</script>
and here is the js call at bottom of the page for the animated responsive grid:
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 4,
columns : 9,
maxStep : 2,
interval : 2500,
animType: 'random',
preventClick: false,
w1100 : { //ipad landscape
rows : 6,
columns : 6
},
w1024 : { //ipad portrait
rows : 6,
columns : 6
},
w768 : { //iphone landscape
rows : 2,
columns : 6
},
w480 : { //iphone portrait
rows : 5,
columns : 4
},
w320 : {
rows : 5,
columns : 4
},
w240 : {
rows : 6,
columns : 4
},
} );
});
</script>
Try to add open:trueinto colorbox's options. Works for me.
PS: provide please your js where u use colorbox and a cut of html
My site is under development and seems to be just dandy on all browsers except for IE10.:
For some reason the menu bar and photo gallery, which are both powered by Jquery just dont work.
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="jQuery Sliding Flexible Menu v2/deploy/js/jquery.sliding-flexible-menu-v2.js"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jQuery Sliding Flexible Menu v2/deploy/css/sliding-flexible-menu-v2.css">
<script type="text/javascript">
$(document).ready(function() {
//Horizontal
$("div.menu-horizontal").slidingFlexibleMenuv2({
buttonSpacing: '1'
});
$(".fancybox").fancybox(
{
transitionIn : 'elastic',
transitionOut : 'elastic',
easingIn : 'easeOutBack',
easingOut : 'easeInBack',
speedIn : '650',
speedOut : '650',
changeSpeed : '650',
padding : '0px',
});
});
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{ Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
<script type="text/javascript" src="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.pack.js"></scr ipt>
<link type="text/css" rel="stylesheet" href="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.css">`
Anyone got a clue why this aint working in IE????
Full site here
http://www.heggie5.webspace.virginmedia.com
Cheers
There are two solutions to this problem:
Place the fancybox css/images as is (as provided by fancybox download) and place fancybox folder in your application root
Modify the jquery.fancybox-1.3.x.css
1.Look for the comment /* IE */
2.Change the src for DXImageTransform.Microsoft.AlphaImageLoader filter for all classes
Please note, approach 1 is better in my opinion, because if you make change to fancybox css file, updgrades would be difficult.
Ok, I'm building a website for a friend, I'm currently using jquery-1.4.3.min.js, corners.js, equalcols.js, and a pre-load image script in the head. Everything works great.
Problem is, I now need FancyBox (LightBox alternative) for a page and it won't seem to work! I know it's because something is conflicting with another but I have no idea what. Is it the order in the head? Or something else? Have tried LightBox and that doesn't work either.
It either doesn't work and stops the EqualCols.js from working, or everything else works EXCEPT the FancyBox for the mini-image gallery that is needed.
The head code is as below: (without FancyBox in there)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<!-- PRELOAD MENU IMAGES BEGINNING -->
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length ;
i + myimages [ i ] =new Image ( myimages [ i ]
src=preloadimages.arguments[i] } Enter path of images to be preloaded
inside parenthesis. Extend list as desired. preloadimages ( images /
home-h.png " images / about-h.png " images / services-rates-h.png "
images / past-work-h.png " images / contact-h.png " images /
shop-specials-h.png " images / free-quote-h.png " images /
book-now-h.png ")
</script>
<!-- PRELOAD MENU IMAGES END -->
<!-- stop curvery corners error in IE -->
<script type="text/javascript" src="js/corners.js"></script>
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
<!-- stop curvery corners error in IE -->
<!-- EQUAL COLS START -->
<script src="js/equalcols.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#left-col,#right-col').equalCols();
});
</script>
<!-- EQUAL COLS END -->
</head>
Is anyone able to tell me where I'd need to put the FancyBox coding for everything to work? Or what else I can do to get it to work? What are the rules? I've researched on Google and can't seem to find the answer I'm after.
The FancyBox code I need to implement is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Do I need the top line there if I'm using this already?:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
Any help much appreciated.
replace:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
with:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Fancybox code:
$(document).ready(function() {
$('#single_image').fancybox();
});
below code is working sample - the fancybox iframe version.
make sure that you add anchor tag in your html/jsp
<!-- The popup iframe . The href value will be updated dynamically -->
<a class="iframe" id="iframe" href="/YourApp/imagePopup.do"></a>
the include block is as follows
<script type="text/javascript" src="/js/jquery/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
/**
jquery ready function
*/
$(document).ready(function(){
// popup for showing
$("a.iframe").fancybox({
'autoDimensions':false,
'width' : 770,
'height' : 'auto', // height is controlled using jquery.fancybox-1.3.4.css line 79
'centerOnScroll' : true,
'scrolling':'auto',
// 'autoScale': true,
'hideOnOverlayClick' : false,
'enableEscapeButton' :true,
'hideOnContentClick': false,
'type':'iframe'
,'onStart' :function(){$.fancybox.showActivity();}
,'onClosed' :function(){ }
});
}); // end ready