Youtube video's and Images in a single gallery.
1,444 views
Skip to first unread message
DennisSmolek
Mar 25, 2011, 12:57:37 AM3/25/11
to fancybox
I am using fancybox as a gallery portfolio on my site: http://dennissmolek.com
it's working great but I'm starting to have video's to be uploaded and
want to figure out how to get them working.
I need fancybox to figure out what kind of file is being displayed
instead of declaring the "type" value. I tried omitting this but it
doesnt work unless you add the SWF type.
Only issue is it then encases all the images In a flash player that is
the same size as the Youtube clip regardless. the images are the
incorrect scale, quality, and size. I want the images to scale.
I tried embedding the clip into a hidden div, then having fancybox
display that div. It created a fancybox of the correct size but was
blank.
I have a few other ideas but I cant get it working.
here is my code with the video working but the images encased.
<html>
<head>
<title> fancybox issues </title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script src="wp-content/themes/aiga/js/fancybox/
jquery.fancybox-1.3.4.pack.js"></script>
<script src="wp-content/themes/aiga/js/jquery.easing.1.3.js"></
script>
<link rel="stylesheet" href="wp-content/themes/aiga//js/fancybox/
jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<ul>
<li><a href="http://dennissmolek.com/wp-content/uploads/2011/03/
fire2.jpg" class="grouped_elements" rel="shadowbox"><img src="http://
dennissmolek.com/wp-content/uploads/2011/03/fire2-150x150.jpg"> </a> </
li>
<li><a href="http://dennissmolek.com/wp-content/uploads/2011/03/
robot1.jpg" class="grouped_elements" rel="shadowbox"><img src="http://
dennissmolek.com/wp-content/uploads/2011/03/robot1-150x150.jpg"></a></
li>
<li><a href="http://www.youtube.com/v/znyMx58fZqQ"
class="grouped_elements" rel="shadowbox">video link </a></li>
</ul>
<script>
$("a.grouped_elements").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'inside',
'autoscale' : 'true',
'type' : 'swf',
});
</script>
</body>
</html>
it's working great but I'm starting to have video's to be uploaded and
want to figure out how to get them working.
I need fancybox to figure out what kind of file is being displayed
instead of declaring the "type" value. I tried omitting this but it
doesnt work unless you add the SWF type.
Only issue is it then encases all the images In a flash player that is
the same size as the Youtube clip regardless. the images are the
incorrect scale, quality, and size. I want the images to scale.
I tried embedding the clip into a hidden div, then having fancybox
display that div. It created a fancybox of the correct size but was
blank.
I have a few other ideas but I cant get it working.
here is my code with the video working but the images encased.
<html>
<head>
<title> fancybox issues </title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script src="wp-content/themes/aiga/js/fancybox/
jquery.fancybox-1.3.4.pack.js"></script>
<script src="wp-content/themes/aiga/js/jquery.easing.1.3.js"></
script>
<link rel="stylesheet" href="wp-content/themes/aiga//js/fancybox/
jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<ul>
<li><a href="http://dennissmolek.com/wp-content/uploads/2011/03/
fire2.jpg" class="grouped_elements" rel="shadowbox"><img src="http://
dennissmolek.com/wp-content/uploads/2011/03/fire2-150x150.jpg"> </a> </
li>
<li><a href="http://dennissmolek.com/wp-content/uploads/2011/03/
robot1.jpg" class="grouped_elements" rel="shadowbox"><img src="http://
dennissmolek.com/wp-content/uploads/2011/03/robot1-150x150.jpg"></a></
li>
<li><a href="http://www.youtube.com/v/znyMx58fZqQ"
class="grouped_elements" rel="shadowbox">video link </a></li>
</ul>
<script>
$("a.grouped_elements").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'inside',
'autoscale' : 'true',
'type' : 'swf',
});
</script>
</body>
</html>
DennisSmolek
Mar 25, 2011, 1:29:04 AM3/25/11
to fancybox
Ok,
after reading: http://groups.google.com/group/fancybox/browse_thread/thread/8c50659a082f9272
I figured it out.
Fancybox runs itself each time its called in a gallery, it knows its
already open and simply resizes to the next image. To run the
different types of content in this case you need different calls for
the other kind of elements. In my experience it usually figures out
DIV's vs Images but in the image/swf area it needs the SWF type
deceleration for the video to play, which encases the images in
flash.
I used the same code above with a slight change and got it to work
perfectly.
code below:
class="video_elements" rel="shadowbox">video link </a></li>
$("a.video_elements").fancybox({
after reading: http://groups.google.com/group/fancybox/browse_thread/thread/8c50659a082f9272
I figured it out.
Fancybox runs itself each time its called in a gallery, it knows its
already open and simply resizes to the next image. To run the
different types of content in this case you need different calls for
the other kind of elements. In my experience it usually figures out
DIV's vs Images but in the image/swf area it needs the SWF type
deceleration for the video to play, which encases the images in
flash.
I used the same code above with a slight change and got it to work
perfectly.
code below:
</ul>
<script>
$("a.grouped_elements").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'inside',
'autoscale' : 'true',
});
<script>
$("a.grouped_elements").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'inside',
'autoscale' : 'true',
$("a.video_elements").fancybox({
RavanH
Mar 26, 2011, 4:14:59 PM3/26/11
to fancybox
clever :)
On 25 mrt, 06:29, DennisSmolek <desopo...@gmail.com> wrote:
> Ok,
> after reading:http://groups.google.com/group/fancybox/browse_thread/thread/8c50659a...
On 25 mrt, 06:29, DennisSmolek <desopo...@gmail.com> wrote:
> Ok,
> after reading:http://groups.google.com/group/fancybox/browse_thread/thread/8c50659a...
Ted
Mar 27, 2011, 12:38:19 AM3/27/11
to fancybox
Any idea how to have a gallery of Youtube videos where only one link
is displayed on the page? I'm wanting to have a 'videos' link and when
you click it the first of many videos is displayed.
is displayed on the page? I'm wanting to have a 'videos' link and when
you click it the first of many videos is displayed.
DennisSmolek
Mar 27, 2011, 11:29:33 PM3/27/11
to fancybox
Sure,
Put the links to the other videos in a hidden DIV. like:
<a href="vid1" id="video_link" rel="videos" >Videos</a>
<div style="display: none;">
<a href="vid2" rel="videos"></a>
<a href="vid3" rel="videos"></a>
<a href="vid4" rel="videos"></a>
</div>
Only the vid1 link would be visible but the rest would be seen by
fancybox and still work.
you could also use the .click() function of jquery to force it. Dont
forget to have an id or class so its easier to target.
Put the links to the other videos in a hidden DIV. like:
<a href="vid1" id="video_link" rel="videos" >Videos</a>
<div style="display: none;">
<a href="vid2" rel="videos"></a>
<a href="vid3" rel="videos"></a>
<a href="vid4" rel="videos"></a>
</div>
Only the vid1 link would be visible but the rest would be seen by
fancybox and still work.
you could also use the .click() function of jquery to force it. Dont
forget to have an id or class so its easier to target.
Les Klassen
Mar 29, 2011, 1:10:24 AM3/29/11
to fancybox
Hello DennisSmolek,
I used the method below to display multiple videos and in fact, images
as well in one gallery. Works great. One problem.
I can't play the video by clicking on the play button because when I
click play, it's too close in proximity to the back arrow and I just
go to the previous iframe.
Any ideas?
I used the method below to display multiple videos and in fact, images
as well in one gallery. Works great. One problem.
I can't play the video by clicking on the play button because when I
click play, it's too close in proximity to the back arrow and I just
go to the previous iframe.
Any ideas?
JFK
Mar 29, 2011, 4:52:19 AM3/29/11
to fancybox
@Les Klassen
check this out
http://groups.google.com/group/fancybox/browse_thread/thread/e57b2f6ebeb5d01e/
check this out
http://groups.google.com/group/fancybox/browse_thread/thread/e57b2f6ebeb5d01e/
Reply all
Reply to author
Forward
0 new messages