fancybox problems in umbraco

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Lars Ljungqvist 14 posts 34 karma points

Jun 18, 2013 @ 13:58

0

Fancybox problems in Umbraco

Hi. The code below makes a fine Fancybox if I make a .html file and upload it to Umbraco.

When I put the same code inside Umbraco in a template or similar, it will not work.

- this works: https://premium.formuepleje.dk/fancybox_test.htm

- this does not work: https://premium.formuepleje.dk/fancybox/

Any help to make it work will be quite appeciated since fancybox in Umbraco makes my hair is grow greyer and greyer. Can it be becourse it is inside a .aspx file?

Thank you in advance
Lars

Here's the code:

<head>
       <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
    <link href="scripts/Fancybox/source/jquery/fancybox.css" rel="stylesheet" type="text/css" media="screen" />
    <script type='text/javascript' src='scripts/Fancybox/source/jquery.fancybox.pack.js'></script>
    <title>Fancybox</title>
</head>
<body>
<h1>Fancybox</h1>

    <a href='images/catboat.jpg' class='fancybox'><p>Her er noget tekst</p></a>

    <a id='inline' class='fancybox' href="#data">This shows content of element who has id="data"</a>

<div style="display:none; width: 650px !important;">
    <div id="data" style="width:600px !important">
        <div style="width: 450px !important; padding-right: 15px !important; height: auto !important; float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
        <div style="width: 100px !important; padding-right: 15px !important; height: auto !important; float: right;">Right-side</div>
    </div>
</div>
    <script type='text/javascript'>
    $(document).ready(function() {
    $('.fancybox').fancybox();
    });
    </script>

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jun 18, 2013 @ 14:06

Hi Lars,

Maybe the problem could be that the script is not being loaded. I can see you have the scripts files in the script folder in Umbraco. Have you tried to add an extra / in your your link to the css and scripts files to see if it will resolve your problem. I have marked the changes with bold

<head>
       <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>    
    <link href="/scripts/Fancybox/source/jquery/fancybox.css" rel="stylesheet" type="text/css" media="screen" />
    <script type='text/javascript' src='/scripts/Fancybox/source/jquery.fancybox.pack.js'></script>
    <title>Fancybox</title>
</head>
<body>
<h1>Fancybox</h1>

    <a href='images/catboat.jpg' class='fancybox'><p>Her er noget tekst</p></a>
   
    <a id='inline' class='fancybox' href="#data">This shows content of element who has id="data"</a>

<div style="display:none; width: 650px !important;">
    <div id="data" style="width:600px !important">
       
 <div style="width: 450px !important; padding-right: 15px !important;
 height: auto !important; float: left;">Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.Quis autem vel eum iure reprehenderit qui in
 ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
 dolorem eum fugiat quo voluptas nulla pariatur?</div>
        
<div style="width: 100px !important; padding-right: 15px !important; 
height: auto !important; float: right;">Right-side</div>
    </div>
</div>
    <script type='text/javascript'>
    $(document).ready(function() {
    $('.fancybox').fancybox();
    });
    </script>

I hope this can help you further

/Dennis

Copy Link

Lars Ljungqvist 14 posts 34 karma points

Jun 21, 2013 @ 13:10

0

Hi Dennis

I solved the problem but I have absolutely no idéa about how I did it. But thank you very much for your answer and you are probally right.

//Lars

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?