fancy box callback function .load jquery - php

$("#btnOK").click(function(){
parent.$("#res"+(d)).load("Customise.php #uni", "PID="+$("#P option:selected").val());
parent.$.fancybox.close(function(){
$("#res"+(d-1)+" a#p").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width':400,
'height':300,
'overlayOpacity' : 0.5,
'type' : 'iframe'
});
});
});
after i click the button. i use a callback function to reintialise a#p it can't work?
any solution?
<div class="cell">
<label id="pID">PID</label> <br /> <input type="text" id="txtPID" size="3" value="<? if(is_numeric($pID)) print("$pID"); ?>"/>
<img src="Images/P.png" name="SelectP_button" id="SelectP_button" />
</div>

are you sure you want to select $("#res"+(d-1)+"a#p") ?
Im assuming that d is a number and you will therefore generate:
#res3a#p
in your selector, which is invalid, youre probably trying to do this
$("#res"+(d-1)+" a#p")

$("#btnOK").click(function(){
parent.$("#res"+(d)).load("Customise.php #uni", "PID="+$("#P option:selected").val());
parent.$.fancybox.close();
});
$("#res"+(d-1)+" a#p").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width':400,
'height':300,
'overlayOpacity' : 0.5,
'onClosed: function(){
$("#res"+(d-1)+" a#p").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width':400,
'height':300,
'overlayOpacity' : 0.5,
'type' : 'iframe'
});
},
'type' : 'iframe'
});
});

Related

pass value child window to parent [fancybox]

this is link to active fancyBox
<a class="demo-select fancybox.ajax" id="select-demo-vdo" href="<?php echo Yii::app()->createUrl("/admin/default/listProgram",array("user_id"=>$user_id));?>">select demo video</a>
<input type="text" id="demo-video-id" name="demo_video" value="" />
AND This is My Script
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$(".demo-select").fancybox({
maxWidth : 900,
maxHeight : 900,
fitToView : false,
width : '80%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
});
});
</script>
In List program view
foreach($lists as $file){
echo "<a href='#' class='thumbnail' onClick='selectVideo($file->id)'>";
echo "$file->name";
echo "</a>";
}
<script type="text/javascript">
function selectVideo(id){
$("#demo-video-id").val(id);
parent.jQuery.fancybox.close();
}
</script>
Problem is:: demo-video-id was updated But FancyBox not close. How to fix this. Thanks
Just use $.fancybox.close();.
fixed Problem layout before active jquery has facybox script and layout show in facybox has script too. Must delete script in layout was showed in facybox.

fancybox is not working with jscarousel 2

i'm having a php code used with jscarousel 2
http://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0/
to display items from the database as a carousel and having links like this
<a id="addtocart" product="<?php echo $productID; ?>" href="#addDiv" >add</a>
and a hidden div
<div style="display:none">
<div id="addDiv" style="width:300px; height:250px; background-color:#969;">test</div>
</div>
and another link just for testing and it's not inside the carousel just like the previous one
the problem is : links inside the carousel don't show the fancybox while the other link outside the carousel shows the fancybox i've tried this
$(document).ready(function(e) {
$("a#addtocart").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$(document).on("click","a#addtocart",function(){
$(this).fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
});
any help please ?
What exactly do you want to do? I think the problem is, you are working with IDs. Maybe you should add the "click" event you are using to a class. Every ID may be in a html document just once, so you can just have one element with the ID addtocart.
add
Try this jQuery:
$(document).ready(function(e) {
$("a .fancybox").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$(document).on("click","a .fancybox", function() {
$(this).fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
When you use the dot (.) instead of the hashkey (#) you are able to use classes instead of ids.
If that does not help you, you can find an implementation of jCarousel and Fancybox right here: http://www.mccran.co.uk/examples/jcarousel/
the solution :
just used this code at the end of the document.ready
$("a.add_to_cart").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
and worked normally but after document.ready makes it doesn't work

Resize Tiny MCE

I'm creating a custom content management system with a rich text editor. I'm using tiny MCE but I'm failing to fit the text area in my content div. I have a <div></div> that is 680px. I want Tiny MCE to fit into the <div></div> properly. However it keeps on overflowing. How can I set the textarea to fit on a width of 680px? Thaks. A sample of my code is down below
<?php
require 'janta_class.php';
$jantaObj = new janta_class();
if (!isset($_GET['pgid']) || empty($_GET['pgid'])) {
$page_id = 1;
} else {
$page_id = $_GET['pgid'];
}
if (isset($page_id) && !empty($page_id)) {
$allowedTags = '<p><strong><em><u><h1><h2><h3><h4><h5><h6><img>';
$allowedTags.='<li><ol><ul><span><div><br><ins><del>';
//you might want to escape some literals here
$page_data = $jantaObj->get_page($page_id);
$page_content = $page_data['page_content'];
$page_title = $page_data['page_title'];
$page_content = strip_tags(stripslashes($page_content), $allowedTags);
}
?>
<!-- TinyMCE -->
<script type="text/javascript" src="./editor/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "rteditor",
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
},
height:"350px",
width:"600px"
});
</script>
<?php //echo $sHeader; ?>
<form method="post" action="">
<textarea id="rteditor" name="rteditor" rows="15" cols="80"><?php echo $page_content; ?></textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
Do not use width with double quotes nor single quotes.
I have got the solution.
Put it like:
width: 300,
and it should work for you. I have tested it with my code.
Solution is to set the width in the tinymce initfunction. Be aware that you place integers there and don't use 'px':
width:"680"

How to get fancybox to open a php

I'm trying to get fancybox to open a php file; the file contains this code <?php echo "hi"; ?>.
Now when I set the image href attribute to a jpeg file it loads fine. But when I set it to a php file it doesn't load. Can I have help trying to get it to load a php file.
<a class= "fancyimg" href="http://mydomain.com/jquery.fancybox-1.3.4/count.php" ><img src="http://mydomain.com/jquery.fancybox-1.3.4/fancyimg2.jpg">
Here is part of my code
<script type="text/javascript">
$(document).ready(function() {
$(".fancyimg").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
Use type attribute of fancybox as below to open php file.
$(".fancyimg").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'type' : 'iframe',
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
you can use something like this :
$(".fancyimg").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe',
padding : 5
});
});
and instead of href="http://mydomain.com/jquery.fancybox-1.3.4/count.php" put your link in a custom attribute called data-id like this :
<a class= "fancyimg" href="#" data-id="http://mydomain.com/jquery.fancybox-1.3.4/count.php" ><img src="http://mydomain.com/jquery.fancybox-1.3.4/fancyimg2.jpg"></a>

fancybox image and text inside a dynamic scroller

I have a scroller maked with a plugin called simplyscroll.js in jquery. Inside It I scroll many images loaded at runtime using a database. I want to apply at every image a fancybox of the image with some text loaded by database:
(The text that I wanto to load is inside $img['txt'])
code:
<ul id="scroller2">
<?php
$qry_img= $db->query("SELECT * FROM image_prodotti;");
while( $img = $qry_img->fetch_array() ){
echo '<li class="new"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></li>';
?>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("a.fancy").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true
});
});
</script>
There would be three possible ways to do it :
First (the easiest and simplest) - Add a title attribute to the <a> tag and set $img['txt'] as its value:
<ul id="scroller2">
<?php
$qry_img= $db->query("SELECT * FROM image_prodotti;");
while( $img = $qry_img->fetch_array() ){
echo '<li class="new"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /></li>';
?>
</ul>
You don't need to do any modification to your script. Notice that with this option, the title will show up as tooltip when you hover the thumbnail.
Second - Set $img['txt'] as the value of the alt attribute in the thumbnail (<img> tag) :
<ul id="scroller2">
<?php
$qry_img= $db->query("SELECT * FROM image_prodotti;");
while( $img = $qry_img->fetch_array() ){
echo '<li class="new"><img src="img/prodotti/caricati/'.$img['url'].'" alt="'.$img['txt'].'" /></li>';
?>
</ul>
Then add the API option 'titleFromAlt':true to your script :
$(document).ready(function(){
$("a.fancy").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'titleFromAlt' : true // NEW
}); // fancybox
}); // ready
Third - Depending on the amount of text, you may prefer to store $img['txt'] in a hidden <div> just right after the <a> tag; then set its content as the fancybox title once it is opened :
<ul id="scroller2">
<?php
$qry_img= $db->query("SELECT * FROM image_prodotti;");
while( $img = $qry_img->fetch_array() ){
echo '<li class="new"><img src="img/prodotti/caricati/'.$img['url'].'" alt="" /><div style="display: none;">'.$img['txt'].'</div></li>';
?>
</ul>
Then use this script to fetch the contents of the hidden <div> :
$(document).ready(function(){
$("a.fancy").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'titlePosition' : 'over', // NEW
'onStart' : function(currentArray,currentIndex){
var obj = currentArray[ currentIndex ];
this.title = $(obj).next('div').html();
}
}); // fancybox
}); // ready
NOTE : this is for fancybox v1.3.2 +

Categories