I orginally posted this in the old forum, but that forum has now been disabled, so here comes another attempt.
I'am running umbraco 4.0.2.1 on MySql and WinXP and have been trying to set up a personal gallery for my travel pictures.
I have been trying to get Mtt Gallery 4.0 (with fancybox) to work, but I can't seam to get the fancybox function to fire. I have tried to read up on how the fancybox function gets called on it's homepage and from the umbraco forum.
Do I miss something in how the fancybox function is called, I thought the "$("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });" should be called using the group class attribute as in the syntax generated by the macro?
Where is my logic wrong?
It's been awile since I did some web work, so please bear with me.
Best regards Max Sweden
(Will post a follow up soon, but in new post to make it easier to read.)
Okay, here comes some more information. The Umbraco instalIation was an 4.0.0 installation, that has been upgraded to 4.0.2.1. It got Runway, Runway Dropdown Navigation, mtt gallery 4.0, Imagegen and MultipleFileUpload installed.
Since I could not get the gallery fancybox to work, I had a look at the example that comes with the fancybox download.
Okay, I have solved it now. I needed to move the declaring into the Gallery Template instead of the Master Runway template. I thought it should been in the head tag as in the example code that comes with fancyBox, but this works.
So this went into my Gallery Template instead and now it is working.
Hi Rasmus, The mtt gallery with fancyBox is working now, but thanks for the tip. I found your package when I was trying to solve my problem. Your using lightbox for yours I believe. I will set your post as solution so the topic is shown as solved, since I can't set my posts as solution.
Lots of little bugs in IE8. The images show in the fancybox, but they are cropped very oddly. There are also incomplete borders around the image links in the gallery. Anybody have any luck fixing any of this?
mttGallery - can't get fancybox function working
Hi!
I orginally posted this in the old forum, but that forum has now been disabled, so here comes another attempt.
I'am running umbraco 4.0.2.1 on MySql and WinXP and have been trying to set up a personal gallery for my travel pictures.
I have been trying to get Mtt Gallery 4.0 (with fancybox) to work, but I can't seam to get the fancybox function to fire. I have tried to read up on how the fancybox function gets called on it's homepage and from the umbraco forum.
I also found an excellent guide on how to get it working using lightbox here http://www.quartex.co.za/blog/2008/6/19/umbraco-lightbox-gallery-reading-from-a-folder.aspx. But the calling of the js function is different for the lightbox function.
I have the following in the head tag of my template in umbraco,
<!-- Jquery fancybox-->
<script src="/scripts/jquery.js" type="text/javascript"></script>
<script src="/scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/scripts/jquery.fancybox-1.2.1.pack.js" type="text/javascript"></script>
<link href="/css/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">$(document).ready(function() { /* This is basic - uses default settings */
$("a#single_image").fancybox(); /* Using custom settings */
$("a#inline").fancybox({ 'hideOnContentClick': true });
$("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });</script>
And the corresponding images in the gallery has the following syntax generated from the macro,
<div id="imageList"><div class="galPic"><a href="/umbraco/imageGen.aspx?image=/media/2461/DSCF0410.JPG&width=1024&constrain=true" class="group" rel="group" title=""><div class="imgWrapper" style="width:200px; height:200px; overflow:hidden;"><img src="/umbraco/imageGen.aspx?image=/media/2461/DSCF0410.JPG&width=200&constrain=true" alt="" /> etc...
Do I miss something in how the fancybox function is called, I thought the "$("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });" should be called using the group class attribute as in the syntax generated by the macro?
Where is my logic wrong?
It's been awile since I did some web work, so please bear with me.
Best regards
Max
Sweden
(Will post a follow up soon, but in new post to make it easier to read.)
Okay, here comes some more information. The Umbraco instalIation was an 4.0.0 installation, that has been upgraded to 4.0.2.1. It got Runway, Runway Dropdown Navigation, mtt gallery 4.0, Imagegen and MultipleFileUpload installed.
Since I could not get the gallery fancybox to work, I had a look at the example that comes with the fancybox download.
There you have a simple index.html.
In the head they declare,
So I decided to try and get this basic example working within Umbraco.
So I declared the following in the head of Master.Template.
Then looking in the body section of their example you get this,
And translated to my umbraco page I got this, using the same pictures twice.
<p><a rel="group" href="/media/3378/4b.jpg" title="Group title #1"
class="group"><img src="/media/3383/4s.jpg"/></a></p>
<p><a rel="group" href="/media/3378/4b.jpg" title="Group title #2"
class="group"><img src="/media/3383/4s.jpg"/></a></p>
I have double checked that the js and css files can be accessed by running http://localhost/scripts/...for all the files and they can be accessed.
All that is happening now when the fancybox should kick in, is that the bigger picture gets open on new page.
Now I am at a loss on how to proceed.
I would not surprise me, if I missed something simple.
As I said in the previous post, it been awhile since I did any html coding, well close to 8 years...so bear with me.
Best regards
Max
Okay, I have solved it now. I needed to move the declaring into the Gallery Template instead of the Master Runway template. I thought it should been in the head tag as in the example code that comes with fancyBox, but this works.
So this went into my Gallery Template instead and now it is working.
<!-- Jquery fancybox-->
<script src="/scripts/jquery.js" type="text/javascript"></script>
<script src="/scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/scripts/jquery.fancybox-1.2.1.pack.js" type="text/javascript"></script>
<link href="/css/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">$(document).ready(function() { /* This is basic - uses default settings */
$("a#single_image").fancybox(); /* Using custom settings */
$("a#inline").fancybox({ 'hideOnContentClick': true });
$("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });</script>
Regards
Max
Or try to take a look at our gallery package. It's really easy to use and it sounds like it would solve your gallery needs.
http://umbdesignit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=26432
Hi Rasmus, The mtt gallery with fancyBox is working now, but thanks for the tip. I found your package when I was trying to solve my problem. Your using lightbox for yours I believe. I will set your post as solution so the topic is shown as solved, since I can't set my posts as solution.
Best regards
Max
Lots of little bugs in IE8. The images show in the fancybox, but they are cropped very oddly. There are also incomplete borders around the image links in the gallery. Anybody have any luck fixing any of this?
is working on a reply...