I need to load fancybox with inside php file, when I will click on textarea.
My code:
<script type="text/javascript">
$("#mypop").click(function() {
$.fancybox({
'href' : 'file.php',
'transitionIn' : 'none',
'transitionOut' : 'none',
'titleShow' : false,
'overlayColor' : '#fff',
'overlayOpacity': 0.8 }); });</script>
<textarea rows="4" cols="50" onfocus="#mypop" ></textarea>
Why this is not working ?
You need to change your textarea tag: remove onfocus="#mypop" and add id="mypop". The $("#mypop") function-call will search for an element with id="mypop", and the click(function(){...}) function will add the event-listener. This function-call also makes the onfocus=-attribute unnecessary.
<script type="text/javascript">
$("#mypop").click(function() {
$.fancybox("<iframe src='file.php' frameborder='0'></iframe>",{
maxWidth : 700,
maxHeight : 600,
fitToView : false,
width : '50%',
height : '50%',
autoSize : true,
closeClick: false
});
});
</script>
<textarea rows="4" cols="50" id="mypop" ></textarea>
By: Jose ALfredo Cocom Chan
Related
I use FancyBox and Isotope on my personnal gallery website and I discover that FancyBox shows all pictures even if they are filtered by isotope.
I have a look on different solutions:
jQuery Isotope filtering with Fancybox
How to only show filtered images in fancybox when using isotope filters and multiple filters?
but no one works for me.
In my case, I have a js file to configure FancyBox, and FancyBox may be used without isotope, in other part of my gallery:
$(document).ready( function() {
$().fancybox({
selector : '[data-fancybox="images"]',
loop : true,
margin : [20, 0],
buttons : [
'thumbs',
'slideShow',
'close'
],
protect : true,
animationEffect : 'fade',
touch : {
vertical : false
},
slideShow : {
autoStart : false,
speed : 3000
},
clickContent : function( current, event ) {
return current.type === 'image' ? 'toggleControls' : false;
},
clickSlide : false,
clickOutside : false,
dblclickContent : function( current, event ) {
return current.type === 'image' ? 'next' : false;
},
caption : function( instance, item ) {
if ($(this).find('.caption').length) {
return $(this).find('.caption').html();
} else {
return $(this).attr('title');
};
},
mobile : {
thumbs : false,
idleTime : 3,
clickContent : function( current, event ) {
return current.type === 'image' ? 'toggleControls' : false;
},
dblclickContent : function( current, event ) {
return current.type === 'image' ? 'next' : false;
},
dblclickSlide : false,
},
});
});
my html and js code is a following
<div class="pager">
<div class="btn-group filters-button-group">
<button class="btn btn-default btn-sm active" data-filter="*">Toutes</button>
<button class="btn btn-default btn-sm" data-filter=".2010">2010</button>
<button class="btn btn-default btn-sm" data-filter=".2011">2011</button>
<button class="btn btn-default btn-sm" data-filter=".2012">2012</button>
</div>
</div>
<div id="isotope-wrap" class="margin-bottom-double">
<div class="gutter-sizer"></div>
<div class="image-item image-item-height2 2010">
<a class="thumb" href="/albums/fetes-des-lumieres-de-lyon/img_8743.jpg" title="Cathédrale Saint-Jean / 2012" data-fancybox="images">
<img src="/cache/fetes-des-lumieres-de-lyon/img_8743_w150_h235_cw150_ch235_thumb.jpg" alt="Cathédrale Saint-Jean / 2012" class="remove-attributes img-responsive" width="150" height="235" />
</a>
</div>
<div class="image-item image-item-width2 2011">
<a class="thumb" href="/albums/fetes-des-lumieres-de-lyon/img_2216.jpg" title="Fontaine Bartholdi / 2005" data-fancybox="images">
<img src="/cache/fetes-des-lumieres-de-lyon/img_2216_w235_h150_cw235_ch150_thumb.jpg" alt="Fontaine Bartholdi / 2005" class="remove-attributes img-responsive" width="235" height="150" />
</a>
</div>
<div class="image-item image-item-height2 2012">
<a class="thumb" href="/albums/fetes-des-lumieres-de-lyon/img_8709.jpg" title="Cathédrale Saint-Jean / 2012" data-fancybox="images">
<img src="/cache/fetes-des-lumieres-de-lyon/img_8709_w150_h235_cw150_ch235_thumb.jpg" alt="Cathédrale Saint-Jean / 2012" class="remove-attributes img-responsive" width="150" height="235" />
</a>
</div>
[...]
</div>
<script type="text/javascript">
// init Isotope after all images have loaded
var $containter = $('#isotope-wrap').imagesLoaded( function() {
$containter.isotope({
itemSelector: '.image-item',
layoutMode: 'packery',
// packery layout
packery: {
gutter: '.gutter-sizer',
}
});
});
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$containter.isotope({ filter: filterValue });
});
// change is-active class on buttons
$('.btn-group').each( function( i, buttonGroup ) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
what can I do to dynamicaly configure FancyBox ot display only displayed pictures filtered by Isotope?
you can see my website and my issue in action here http://www.vincentbourganel.fr/fetes-des-lumieres-de-lyon/
Thanks for your help.
Tweak your selector so it returns only visible items, example:
selector : '.image-item:visible > a'
You can use any valid jQuery selector here.
I am using Fancy popup in a tag on click it show it working fine. Below my code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://fancyapps.com//fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com//fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
Click Me
<div style="display:none">
<div id="myDivID">
<input type="text" id="fname" name="fname" placeholder="First Name" required="true" class="form-text" />
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a#fancyBoxLink").fancybox({
// 'href' : '#myDivID',
'titleShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'openEffect' : 'elastic',
'closeEffect' : 'elastic',
'maxWidth' : 800,
'maxHeight' : 600,
'fitToView' : false,
'width' : '70%',
'height' : '70%',
'autoSize' : false,
'closeClick' : false
}); });
</script>
Now My problem is i want to i want to call that a tag link in this html so i added below script
<script>
$(document).on('click', 'a', function(e) {
e.preventDefault();
e = $(this).attr('href');//this gets the href
//e = $(this).text();//This gets the text
$('#fname').val(e);
});
</script>
I want to pass href to that input box so I change this to Click Me
this Click Me after this it stop working how i make it as working
I want to use the JavaScript Alfresco.ObjectPicker component in order to have category picker into the file: dnd-upload.get.html.ftl
<div class="form-field inlineable">
<label >Catégories:</label>
<div class="object-finder inlineable" id="a_default_prop_cm_categories-cntrl">
<div class="current-values inlineable object-finder-items" id="b_default_prop_cm_categories-cntrl-currentValueDisplay"></div>
<input type="hidden" value="" name="prop_cm_categories" id="c_default_prop_cm_categories"/>
<div class="show-picker inlineable" id="d_default_prop_cm_categories-cntrl-itemGroupActions"><span class="yui-button yui-push-button" id="yui-gen7"><span class="first-child"><button type="button" tabindex="0" id="yui-gen7-button" >Sélectionner</button></span></span></div>
<script type="text/javascript"> //<![CDATA[
(function(){
var picker = new Alfresco.ObjectFinder("a_default_prop_cm_categories-cntrl", "c_default_prop_cm_categories").setOptions(
{
field: "prop_cm_categories",
compactMode: true,
mandatory: false,
currentValue: "",
selectActionLabel: "Sélectionner",
minSearchTermLength: 1,
maxSearchResults: 1000
}).setMessages(
{""}
);
picker.setOptions(
{
itemType: "cm:category",
multipleSelectMode: true,
parentNodeRef: "alfresco://category/root",
itemFamily: "category",
maintainAddedRemovedItems: false,
params: "",
createNewItemUri: "",
createNewItemIcon: ""
});
})();
//]]>
</script>
</div>
</div>
And I have declared a JS dependency in the same file: dnd-upload.get.html.ftl
<#script type="text/javascript" src="${url.context}/res/components/object-finder/object-finder.js" group="objectfinder"/>
When I click on the button : "Sélectionner" , nothing happens and I have no console error neither.
Do you , Please, have any idea about how to make this Picker Working ?
Regards,
Sofia.
I would like to load my fancybiox iframe when the page is loaded:
<script type="text/javascript">
$(document).ready(function(){
$("a.various2").fancybox({
padding: 0,
margin: 0,
width: 400,
height: 350,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</head>
<body>
<a class="various2" data-fancybox-type="iframe" href="nlpumc.html">Iframe</a>
This script works by clicking on the link. But how does it work with document ready? I testet:
$("a.various2").fancybox.open({
That's not correct?
Thank you!
Here's the HTML...
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
And here's the JS...
// Activate fancyBox
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0
});
// Launch fancyBox on first element
$(".fancybox").eq(0).trigger('click');
And now the JSFiddle...
Click here.
Works like a charm!
I am hardly trying to fix it but couldn't. I have the code added to comments.php file so that if I select Leave a comment fancy box will open a popup window to post comments, it pops up but when I select the pop window it simply closes. My code is below. Please help
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<div class="comment-buttons"><a href="#inline1" class="various" title="Leave a Comment">
Leave a Comment</a></div>
<div id="inline1" style="display: none;width:600px;height:410px;"><?php comment_form(); ?></div>
I solved it myself,
I added
hideOnContentClick : false,
and that fixed then issue.