Hi I've a HTML with links to differents albums, and I would like just click on a
simple link to see the first picture from the gallery and then navigate. the problem is that each album is inside from other HTML .. in the galleries.html are just the links to albums.
Example:
galleries.html
<td><img src="album_prueba1/001.jpg" alt="image19" width="91%" height="56" /></td>
<td><img src="album_prueba2/40.jpg" alt="image20" width="99%" height="60"/></td>
PHP of a gallery:
<a class="fancyboxi" data-fancybox-group="gallery" title="Laurea"
href="album_prueba1/<?php echo $archivos[$imagen_a_empezar]?>">
<img src="album_prueba1/<?php echo $archivos[$imagen_a_empezar]?>" alt="" width="19%"/></a>
any idea?
index.htm
<html>
<head>
<title></title>
<link href="jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.fancybox-1.3.4.js" type="text/javascript"></script>
</head>
<body>
Gallery 1<br/>
Gallery 2
<script type="text/javascript">
$(document).ready(function () {
$("#manualCall1").click(function () {
$.getJSON('gallery1.json', function (data) {
$.fancybox(data, {
'index': $(this).data('index'),
'padding': 0,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'image',
'changeFade': 0
});
});
});
$("#manualCall2").click(function () {
$.getJSON('gallery2.json', function (data) {
$.fancybox(data, {
'index': $(this).data('index'),
'padding': 0,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'image',
'changeFade': 0
});
});
});
});
</script>
</body>
</html>
gallery1.json
[{
"href" : "https://lh5.googleusercontent.com/-uK9RF21pLaw/T0-bfLydozI/AAAAAAAAG2Q/CHSPYlMM5hA/w339-h225-n-k/_DSC1774_DRI_PS_small.jpg",
"title" : "image title 1"
}, {
"href" : "https://lh4.googleusercontent.com/-B9Fop2ZofLI/T5JZiYzoZKI/AAAAAAAAH5M/0X6lYTa8LAs/w402-h266-n-k/_DSC8800-HDR_corrected_PS_small.jpg",
"title" : "image title 2"
}, {
"href" : "https://lh6.googleusercontent.com/-MtVcdgn6ZA0/T6LSPnrxfbI/AAAAAAAAIP8/g_BubTeiVbY/w467-h310-n-k/_DSC3079_DRI_PS_transf_small.jpg",
"title" : "image title 3"
}]
gallery2.json
[{
"href" : "https://lh4.googleusercontent.com/-PmHloor5LiU/T7K0_5nq55I/AAAAAAAAIcI/qz8NYty16Yo/w400-h248-n-k/_DSC3336_DRI_PS_defish_small.jpg",
"title" : "image title 2 1"
}, {
"href" : "https://lh3.googleusercontent.com/-Okzptj_C2cI/T76BCKM4asI/AAAAAAAAKSE/gvPy2sKdbmU/w386-h254-n-k/_DSC3533_DRI_PS_defish_small.jpg",
"title" : "image title 2 2"
}, {
"href" : "https://lh6.googleusercontent.com/-snm10rkSqDo/T94UWhaFGjI/AAAAAAAALAk/X7b5dVcSKb4/w412-h273-n-k/_DSC3440_DRI_PS_defish_small.jpg",
"title" : "image title 2 3"
}]
Related
I'm using Fancybox inside a Codeigniter View, but when I click the anchor I get this "strange" dimension:
I don't get why. I tried to change pdf section several times, changing height,width,autosize,autodimension, but everyime with no results. Here the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" src="http://fancyapps.com/fancybox/source/jquery.fancybox.css"></script>
<link rel="stylesheet" src="<?php echo base_url('/Fancybox/source/helpers/jquery.fancybox-buttons.css'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/source/jquery.fancybox.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/lib/jquery.mousewheel-3.0.6.pack.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/source/helpers/jquery.fancybox-buttons.js'); ?>"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$('.imagen').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}
],{
// href: this.href,
helpers: {
overlay: {
opacity: 0.3
} // overlay
//, buttons: {}
} // helpers
}); // fancybox
}); // click
$('.video').click(function(e){
e.preventDefault();
parent.$.fancybox({
href: this.href,
width: 560,
height: 315,
type: 'iframe',
helpers: {
overlay: {
opacity: 0.3
} // overlay
} // helpers
}); // fancybox
}); // click
$(".pdf").click(function(){
parent.$.fancybox({
type: 'html',
width: 560,
height: 315,
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
},
helpers: {
overlay: {
opacity: 0.3
} // overlay
}
}); //fancybox
return false;
}); //click
}); // ready
/* ]]> */
</script>
<script>
$(".fancypdf").click(function(){
$.fancybox({
'width':400,
'height':1200,
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=100,0,0" type="application/pdf" height="100%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>
<a class="pdf" data-fancybox-type="iframe" rel="group" href="http://www.istruzioneformazionelavoro.it/Engine/RAServeFile.php/f/corsi/84/Tabella_corsi_allegatoDD311.pdf">prova</a>
Update:
This is the image result with your code:
Opening PDF files in fancybox can be as simple as setting the special class data-fancybox-type="iframe" in your anchor like you did :
<a class="pdf" data-fancybox-type="iframe" rel="group" href="http://www.istruzioneformazionelavoro.it/Engine/RAServeFile.php/f/corsi/84/Tabella_corsi_allegatoDD311.pdf">prova</a>
... then use a normal fancybox initialization script like :
jQuery(document).ready(function($) {
$(".pdf").fancybox({
// API options
}); // fancybox
}); // ready
See JSFIDDLE
No need to over-complicate things ;)
PS. Doesn't really matter whether you are using codeigniter or not
I`m not sure, maybe this question is already answered or there is some similar, but i hope that this will be the easiest way for me, to figure out this problem.
So i have this code in my "head" tag:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#fb_man").click(function() {
$.fancybox.open([
{
href : 'both.jpg',
title : 'My title'
}, {
href : 'front.jpg',
title : '2nd title'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
And this one in my body:
<a id="fb_man" href="javascript:;"><img src="img/eyey.png"></a>
I want to open a gallery of 2 images (both.jpg and front.jpg) on click on eyey.png, but i get this error:
Uncaught TypeError: $.fancybox.open is not a function
How can i solve this error ?
just change this part from
$.fancybox.open([
to
$.fancybox([
I want to hide a large number of images on the html page. While using fancybox-thumbnail to show there are other images to view. Goal is to have the page look clean and not cluttered with a bunch of images. But it's not working, not sure if it's something conflicting or does this idea not work and I HAVE to show the other images on the page.
HEAD Tags:
<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
BODY Tags:
<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/3pk.jpg">
<div class="imgconcept"></div></a>
<div class="hidden">
<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/clcfashnb.jpg"><img src="images/art/clcfashnb.jpg" alt="" /></a>
</div>
EDIT:
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
DEMO
The problem was actually straight forward. You were missing two vital libraries for the thumbnails to work.
jquery.fancybox-thumbs.js
jquery.fancybox-thumbs.css
That's all there was to it.
Your code was good.
$(".fancybox-thumb").fancybox({
prevEffect: 'none',
nextEffect: 'none',
helpers: {
title: {
type: 'outside'
},
thumbs: {
width: 50,
height: 50
}
}
});
I have downloaded fancyBox from here:
http://fancyapps.com/fancybox/#license
and this is the code I have in my 'test' Web page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>fancyBox</title>
<meta charset="utf-8">
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/* Different effects */
// Change title type, overlay closing speed
/* Button helper. Disable animations, hide close button, change title type and content */
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Button helper</h3>
<p>
<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>
I think I have the paths right on my server, but this is what I see:
http://www.bayingwolf.com/site_pop_up/image_pop.html
instead of the fancyBox (under Button Helper) on their site.
What am I doing wrong, please?
Thanks.
Blue
I'm getting a 404
"NetworkError: 404 Not Found - http://www.bayingwolf.com/site_pop_up/source/jquery.fancybox-1.3.4.pack.js"
Few problems
1) jquery.fancybox-1.3.4.pack.js is not loading.. (404 error.) You might want to check the path correctly
2) closing tags are missing for $(document).ready(function(){
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' +
this.group.length +
(this.title ? ' - ' + this.title : '');
}
});
})
</script>
Advice
Indent the code properly to avoid subtle bugs.
I want to open a youtube video in the new fancybox. I don't get it to work. It always goes directly to the page instead of opening it in the fancybox. Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube video</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/jquery.fancybox.pack.js"></script>
<script>
$(document).ready(function(){
$(".fancybox-media").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
Video
</body>
</html>
What I'm doing wrong? I also tried this code (as stated on the fancybox website):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube test</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css" />
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css" />
</head>
<body>
<a class="various fancybox.iframe" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1"><img src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" width="200" /></a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.fancybox-buttons.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none'
});
});
</script>
</body>
</html>
This code should be the same as on this page. What is the difference?
EDIT:
It is the youtube link!
http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1
does work.
This link doesn't
http://www.youtube.com/watch?v=b_ojoebJyvc
What can I do?
$(document).ready(function() {
$(".various").click(function() {
$.fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
href : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?fs=1&autoplay=1'
});
//alert(this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'));
alert(this.href);
});
});
This doesn't work. The href is never overwritten!
This also doesn't work (it always follows the link and no fancybox is openend):
$(document).ready(function() {
$(".various").click(function() {
$.fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeLoad : function(){
var url= $(this.element).data("href");
url.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?fs=1&autoplay=1'
this.href = url
alert(url);
}
});
//alert(this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'));
//alert(this.href);
});
});
So I think you can forget fancybox 2.0. Take the old one and you are good ...
Thanks to JFK again. This works now:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube test</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
</head>
<body>
<a class="various fancybox.iframe" href="http://www.youtube.com/watch?v=L9szn1QQfas"><img src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" width="200" /></a>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeLoad : function(){
var url= $(this.element).attr("href");
url = url.replace(new RegExp("watch\\?v=", "i"), 'v/');
url += '?fs=1&autoplay=1';
this.href = url
}
});
});
</script>
</body>
</html>
Remove the dot in your class attribute and it should work:
Video
(edited)