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.
Related
I created an attribute called "youtube" (text field only) on magento. In this text field I put youtube video urls like (www.youtube.com/embed/nk_FpiXp-3s) etc...
So my issue is I`m trying to php echo this attribute "youtube" inside my html href code.
<a class="various fancybox.iframe" href="<?php echo $_product->getAttributeText('youtube')?>">Youtube (iframe)</a>
but it seems to break the page. Also my fancybox script.
<script>
var $j = jQuery.noConflict();
$j(".various")
.attr('rel', 'gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
margin : [20, 60, 20, 60] // Increase left/right margin
});
</script>
Any tips guys ?
It's custom attribute inside of a custom block. The block on product page is working fine so the issue is on php echo.
Thanks!
Sorry for the missing (?>) but it seems to not be working.
Hello Check below code may be help you
$_product->getData('youtube');
OR
$attributes = $_product->getAttributes();
$attributes['youtube']->getFrontend()->getValue($_product);
Use the code below
<?php echo $_product->getYoutube(); ?>
Given that your PHP is totally invalid, by never closing the <?php tag. Perhaps you want something more like (split over multiple lines for legibility):
<a
class="various fancybox.iframe"
href="<?php echo $_product->getAttributeText('youtube') ?>">
^^^---missing
Youtube (iframe)</a>
I found the solution...
html:
<?php $_product = $this->getProduct(); ?>
<?php if($_product->getVideobox()): ?>
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/<?php echo $_product->getVideobox(); ?>">video<a/>
<?php endif; ?>
script:
<script>
var $j = jQuery.noConflict();
$j(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
margin : [20, 60, 20, 60] // Increase left/right margin
});
</script>
Videobox = attribute code
I am using Fancybox jquery.I have a link when I click on this link at that time I retrieve images via AJAX.I want these images open in Fancybox directly.
This is my html code-
Store Pictures
Store Pictures
<div id="storeModal"></div>
This is my jquery code--
$(document).ready(function(){
$('.store_pictures_click').click(function(e){
e.preventDefault();
var store_name = $(this).attr('id');
$.post('<?php echo site_url("cart/change_store_pictures"); ?>',{store_name:store_name},
function(data){
$('#storeModal').html(data);
$('.fancybox').fancybox();
}
);
});
});
This is my PHP code-
$store_name = $this->input->post('store_name');
$this->load->model('Store_Pictures_model');
$data['store_pictures'] = $this->Store_Pictures_model->get_store_pictures($store_name);
echo '<p>';
foreach($data['store_pictures'] as $store_picture){
?>
<a class="fancybox" href="<?php echo base_url('uploads/images/full/'.$store_picture->store_picture); ?>" ></a>
<?php
}
echo '</p>';
But I am not able to see popup of fancybox with slider.Please help me guys.
Thanks in advance!!!
Changes in the view:
Store Pictures
Store Pictures
<script type="text/javascript">
$(function(){
$(".store_pictures_click").fancybox({
type : 'iframe',
autoSize : false,
/*beforeLoad : function() {
this.width = parseInt(this.href.match(/width=[0-9]+/i)[0].replace('width=',''));
this.height = parseInt(this.href.match(/height=[0-9]+/i)[0].replace('height=',''));
//this.width = $('.fancybox-iframe').contents().find('.fancybox-skin').width();
//this.height = $('.fancybox-iframe').contents().find('.fancybox-skin').height();
},*/
width : "710px",
height : "290px",
'scrolling' : 'no',
'titleShow' : false,
//padding : 0,
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
Your controller:
function change_store_pictures(){
$store_name = $this->uri->segment( 3 );
$this->load->model('Store_Pictures_model');
$data['store_pictures'] = $this->Store_Pictures_model->get_store_pictures($store_name);
$this->load->view("pic_popup", $data);
}
Your pic_popup.php:
<?php
//print_r( $store_picture );
?>
<a class="fancybox" href="<?php echo base_url('uploads/images/full/'.$store_picture->store_picture); ?>" >
<img src="<?=base_url('uploads/images/full/'.$store_picture->store_picture)?>">
</a>
Hope it helps. :D
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>
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 +
I've included the js and css files, in the frontend all is loaded correctly, but when I click on
Upload
nothing happens, not receiving any error in firebug.
Basically, I can't upload files. Even if the uploadify option "auto" is set to "true".
How to repair this? What can be wrong?
My code:
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'width': 500,
'height' : 400,
'overlayShow' : false
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#file_upload").uploadify({
"uploader": "/js/uploadify/uploadify.swf",
"script": "/uploadify/upload",
"cancelImg": "/img/uploadify/cancel.png",
"scriptData": {'type': 1},
'removeCompleted' : true,
'folder': '/uploads',
"auto": true,
"multi": false,
"onComplete": function(event, ID, fileObj, response, data) {
},
'onError': function (event, ID, fileObj, errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
}
});
});
</script>
<input type="file" id="file_upload" name="file_upload" />
Upload
Thanks
I would assume - since your using jQuery that the code should be as follows:
<script type="text/javascript">
$().ready(function() {
$('#upload').click(function() {
$('#file_upload').uploadifyUpload();
});
});
</script>
Upload
This would be more in line with the way jQuery usually works.
Shouldn't that be the onclick event?
Upload
If auto is set to true the files should upload automatically as soon as they are selected so you don't even need an upload link/button. Just put this inside your document ready function.
$("#file_upload").uploadify({
'uploader' : '/js/uploadify/uploadify.swf',
'script' : '/js/uploadify/uploadify.php',
'cancelImg' : '/js/uploadify/cancel.png',
'folder' : '/some_folder',
'fileExt' : '*.jpg;*.jpeg;*.gif;*.png',
'auto' : true});
Is it possible you need to use a complete form tag?
To get the multipart/form-data generated automagically you can do:
<?php $this->Form->create('Document', array('type' => 'file')); ?>
I don't know if uploadify requires a form tag but it seems logical that if the demo here shows a complete form tag that your test script should have one also -
http://uploadify.wdwebdesign.com.br/
This is the 3.0 demo - which might be newer than your version but the code on both demos shows a complete form. Again, your code as shown does not.
maybe you can try this:
href="javascript:$('#custom_file_upload').uploadifyUpload($('.uploadifyQueueItem').last().attr('id').replace('custom_file_upload',''))
from the offical demo
uploadifyupload