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
});
On my website's homepage, I'm looking to incorporate a rotating banner.
I have a selection of images (4), which currently change every 5 seconds.
However, what I would really like is to develop something similar to what Oracle has done - http://www.oracle.com/index.html
You can see their banner is made up of 3 parts:
1) The main image in the middle.
2) A header - that displays an icon for each image.
3) A footer which is by default hidden, but slides up upon a selection.
Any ideas of how I could even get started? I am using HTML and jQuery.
Thanks
Update 29-05-13
Apologies forgot to upload my current code:
HTML:
function rotateBanners(elem) {
var active = $(elem+" img.active");
var next = active.next();
if (next.length == 0)
next = $(elem+" img:first");
active.removeClass("active").fadeOut(200);
next.addClass("active").fadeIn(200);
}
function prepareRotator(elem) {
$(elem+" img").fadeOut(0);
$(elem+" img:first").fadeIn(0).addClass("active");
}
function startRotator(elem) {
prepareRotator(elem);
setInterval("rotateBanners('"+elem+"')", 2500);
}
#rotator img { position: absolute; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<link href="rotate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
$(window).load(function() {
startRotator("#rotator");
})
</script>
</head>
<div id="rotator">
<img src="https://dummyimage.com/600x400/000000/fff&text=1" />
<img src="https://dummyimage.com/600x400/000000/fff&text=2" />
<img src="https://dummyimage.com/600x400/000000/fff&text=3" />
<img src="https://dummyimage.com/600x400/000000/fff&text=4" />
</div>
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>
I need a way for user to select the portion of an image either by resizing transparent rectangle or by clicking and dragging the selection area (as it's done in desktop OS), both would work for me. Then i need to retrieve the coordinates of the selected area with jQuery.
Please recommend samples or tuts (if there are any), methods or API documentations sections that could help.
See Jcrop and it's demos.
<!-- This is the image we're attaching Jcrop to -->
<img src="demo_files/pool.jpg" id="target" alt="Flowers" />
And the script:
<script type="text/javascript">
jQuery(function($){
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
});
// Simple event handler, called from onChange and onSelect
// event handlers to show an alert, as per the Jcrop
// invocation above
function showCoords(c)
{
alert('x='+ c.x +' y='+ c.y +' x2='+ c.x2 +' y2='+ c.y2)
alert('w='+c.w +' h='+ c.h)
};
</script>
<html>
<head>
<title>Image Processs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
</head>
<body>
<img src="https://i.stack.imgur.com/UYYqo.jpg" alt="" id="image">
<script>
$(document).ready(function(){
$('#image').Jcrop({
onSelect: function(c){
console.log(c);
console.log(c.x);
console.log(c.y);
console.log(c.w);
console.log(c.h);
}
})
})
</script>
</body>
</html>
here's the deal:
I'm trying to make a colorpicker act much like in Photoshop, so I have a background image of a color picker (rainbow-like image 200x200 px) and a circle trigger inside of it.
So, if i attach a draggable UI to a circle:
$('#rainbow-color-picker .circle').draggable({containment: 'parent'});
Works great. But here's another issue.. I want the drag to start when I click the parent block of the circle (i.e. the color picker image).
Here's the HTML markup:
<div class='rainbow-color-picker' id='rainbow-color-picker'><div class='inner1'><div class='inner2'>
<div class='circle'><div class='circle-inner'></div></div>
</div></div></div>
So when I click on .inner2, I want .circle to start dragging.
I've tried
$("#rainbow-color-picker .inner2").bind( "mousedown", function(event) {
$("#rainbow-color-picker .circle").trigger('dragstart');
});
But that doesn't work :( did anyone happen to meet this problem?
Thanks
Here it is, just figured it out.
$("#rainbow-color-picker .circle").trigger( event );
Here was my ticket:
Can click on jquery draggable parent start drag?
This is just a draft, feel free to try it out. Included google jQuery and UI for quick draft. Btw, getting the positions from the events should be enough for converting it into colors.
Happy coding :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
var pos = $('#color-pos');
$('#color-field-circle').draggable({
containment: 'parent',
start: function(e) {
pos.html("start: "+e.pageX+" "+e.pageY);
},
drag: function(e) {
pos.html("drag: "+e.pageX+" "+e.pageY);
},
stop: function(e) {
pos.html("stop: "+e.pageX+" "+e.pageY);
}
});
});
</script>
<style type="text/css" media="screen">
#color-picker{width:200px;height:250px;background:#ddd;padding:10px;}
#color-field{width:180px;height:230px;background:#ccc;}
#color-field-circle{cursor:pointer;width:16px;height:16px;background:#f30;}
</style>
</head>
<body>
<div id="color-picker">
<div id="color-field">
<div id="color-field-circle"></div>
</div>
<div id="color-pos"></div>
</div>
</body>
</html>