Viemo or Youtube Lightbox

English forums
1

Hi I would like to add an image to my site that is linked to a Viemo or Youtube Lightbox, how do I do that?

Thanks,

2

I read that using Fancybox from fancybox.net would work.

I added the folder and added these lines to my sidebar.tpl but the image does only link to the image, any idea what is wrong?

<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>

<script type=“text/javascript” src="/fancybox/jquery.fancybox-1.3.4.js"></script>

<script type=“text/javascript” src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script type=“text/javascript” src="/fancybox/jquery.easing-1.4.pack.js"></script>

<script type=“text/javascript” src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

<link rel=“stylesheet” href="/fancybox/jquery.fancybox-1.3.4.css" type=“text/css” media=“screen” />

<script type=“text/javascript”>

$(“fancyYoutube”).click(function() {
$.fancybox({
‘padding’ : 0,
‘autoScale’ : false,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’,
‘title’ : this.title,
‘width’ : 680,
‘height’ : 495,
‘href’ : this.href.replace(new RegExp(“watch\?v=”, “i”), ‘v/’),
‘type’ : ‘swf’,
‘swf’ : {
‘wmode’ : ‘transparent’,
‘allowfullscreen’ : ‘true’
}
});

return false;

});
</script>

<a class=“fancyYoutube” href=“http://www.youtube.com/watch?v=92c3dX-AoXs”><img src=“out/azure/img/test.jpg”/></a>

3

Can you provide the url to the page ?

regards
Rafael

4

Of course!

Http://sitedemo.dittskal.se

The image is just a test for the design.
I want the logo image in the top left to be the image that will be the linked image later.

Thanks,

5

… you are lacking a dot. If you know CSS or jQuery you will find it :wink:

regards

Rafael

6

Can’t you tell me instead? :slight_smile:

7

Come on a true developer loves to puzzle the whole time :wink:


$(".fancyYoutube").click(...

should work

regards

Rafael

8

I changed that but it still doesn´t work.

Any other suggestions?

Thanks,

9

Do I have to include the html parts like head and body?

10

Öhm, i looked through your code and you did something else but not the above mentioned change.

regards

Rafael

11

I just tried some other stuff.
Now it´s the way you said, try it out to see if you find anything!

12

I just saw that I get Access to restricted URI denied. on the jquery.min.js.
What can I do about that and can that be the problem?

Thanks,

13

I solved the jquery problem and tried the stuff that is done here.


But it still doesnt work…

14

OK, this codes looks better.

First:
get rid of:
<script type=“text/javascript” src="/fancybox/jquery-1.6.2.min.js"></script>
<script type=“text/javascript” src="/fancybox/jquery.fancybox-1.3.4.js"></script>

Second:
for the rest use [{oxscript include=“url/to.file” }]

Third: for your code use:
[{oxscript add="$(function(){$(’#fancyYoutube’).fancy…});"}]

if this is not working then there may be independencerrors with other js used by oxid, if it is the case try colorbox.

regards

Rafael

15

I did it like this now, wasn´t shure about the css url?

The scripts doesn´t seem to get included this way, maybe I´ve done it wrong?

[{oxscript include="/fancybox/jquery.fancybox-1.3.4.pack.js" }]

[{oxscript include="/fancybox/jquery.easing-1.3.pack.js" }]

[{oxscript include="/fancybox/jquery.mousewheel-3.0.4.pack.js" }]

[{oxscript include="/fancybox/jquery.fancybox-1.3.4.pack.js" }]

<link rel=“stylesheet” href="/fancybox/jquery.fancybox-1.3.4.css" type=“text/css” media=“screen” />

[{oxscript add="$(function(){
$(’#fancyYoutube’).fancybox({
‘transitionIn’ : ‘elastic’,
‘padding’ : 0,
‘autoScale’ : false,
‘transitionOut’ : ‘fade’,
‘width’ : 680,
‘height’ : 495,
‘type’ : ‘swf’
});
});
"}]

<a class=“fancyYoutube” href=“http://www.youtube.com/watch?v=92c3dX-AoXs”><img src=“out/azure/img/test.jpg”/></a>

16

Maybe oxid cant find the files how is your folder structure in /out/{template}/

For the javascripts?

Style is [{oxstyle include=“url/to.file”}]

17

Why do you include 2 times [{oxscript include="/fancybox/jquery.fancybox-1.3.4.pack.js" }] ?

18

When I use the, oxscript inlcude the files are not found but when I use the <script src they are.

I´ve added colorbox as well now and tried this with both the oxid way and this way but doesn´t work either…

<link media=“screen” rel=“stylesheet” href=“colorbox/colorbox/colorbox.css” />
<script src=“colorbox/colorbox/jquery.colorbox.js”></script>
<script>
$(document).ready(function(){
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});});
</script>

<a class=‘example6’ href=“http://www.youtube.com/embed/617ANIA5Rqs?rel=0&wmode=transparent” title=“The Knife:
We Share Our Mother’s Health”>Flash / Video (Iframe/Direct Link To YouTube)</a>

19

I got some help and have no managed to show an image in the fancybox.
Now I need to get it to show a youtube clip, how do I change it without destroying this precious code?! =)

[{oxscript include=“fancybox/jquery.fancybox-1.3.4.js”}]

[{oxscript include=“fancybox/jquery.fancybox-1.3.4.pack.js”}]

[{oxscript include=“fancybox/jquery.mousewheel-3.0.4.pack.js”}]

[{oxscript include=“fancybox/jquery.easing-1.3.pack.js”}]

[{oxstyle include=“fancybox/jquery.fancybox-1.3.4.css”}]

[{capture assign=“fancybox”}]
$(function(){
$(“a.fancybox”).fancybox();
});
[{/capture}]
[{oxscript add=$fancybox}]

<a class=“fancybox” href=“out/azure/img/test.jpg”><img src=“out/azure/img/test.jpg”/></a>

20

OK, i would say we now have all things regarding Oxid solved. you now know how you can easy include new javascript and CSS. Now it is up to the fancybox developers to show you how to use it properly.
A last Link: http://webdesignandsuch.com/fancybox-youtube-videos/

Good Luck

Regards

Rafael