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
Related
I used bootstrap in my project. in each tab i show a chart my problem is the div display attribute is none and after user clicked on a tag the div display changes to the block. also i wrote a function to handle displaying the chart. but when user clicks on the tab chart not showing. but if i remove the display:none attribute its showing with no problem.
this is my div :
<div id="bar" style="display: none">
<?php echo chart($title,$data,'Bar');?>
</div>
and this is my chart function :
function chart($title,$data,$type){
ob_start();
?>
<script src="<?php echo url()?>/assets/chart/Chart.min.js" type="text/javascript"></script>
<script src="<?php echo url()?>/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<canvas style="display: block;margin: 0 auto;" id="myCanvas" width="600" height="300"></canvas>
<script>
$(function(){
var ctx = $('#myCanvas').get(0).getContext('2d');
var barChartData = {
labels : <?php echo json_encode($title) ?>,
datasets : [
{
fillColor : "rgba(10, 150, 100, 0.8)",
strokeColor : "rgba(24, 107, 2, 0.8)",
highlightFill: "rgba(4, 20, 60, 0.9)",
highlightStroke: "rgba(5, 35, 70, 1)",
data : <?php echo json_encode($data) ?>
}
]
};
var pieChart = new Chart(ctx).<?php echo $type?>(barChartData);
});
</script>
<?php
$view = ob_get_clean();
return $view;
}
and this is the script that shows the div when its clicked:
$('#aBar').on('click',function(){
$('#circle').css('display','none');
$('#line').css('display','none');
$('#bar').css('display','block');
});
Solved. I just have to set visibility to hidden and when user clicked on a tag set this to visible and everything is okay.
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.
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
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 +