Fancybox not working

16 posts by 3 authors in: Forums > CMS Builder
Last Post: July 25, 2012   (RSS)

By cmsb - July 19, 2012

Hi,

I am trying to add fancybox to my CMSbuilder code, and it is not working. Here's the coding below. Any pointers for me?



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery-1.7.2.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="/fancyBox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?"></script>

<link rel="stylesheet" href="/fancyBox/source/helpers/jquery.fancybox-thumbs.css?" type="text/css" media="screen" />
<script type="text/javascript" src="/fancyBox/source/helpers/jquery.fancybox-thumbs.js?"></


<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>



<?php echo $aboutRecord['content'] ?><br/>
<?php foreach ($aboutRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a class="fancybox" rel="group" title"sample" href="<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /></a><br/>

<?php elseif ($upload['isImage']): ?>
<a class="fancybox" rel="group" href="<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /></a><br/>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>
<?php if (!$aboutRecord): ?>
No record found!<br/><br/>
<?php endif ?>

Re: [cmsb] Fancybox not working

By Jason - July 19, 2012

Hi,

Are you getting errors on the page, or is nothing happening when you click an image?
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Fancybox not working

By cmsb - July 19, 2012

Nothing's happening when I click the image [:(] Still working on it and using a combination of forum, fancybox documentation, and the kind explanation of a friend but still struggling with it....

Re: [cmsb] Fancybox not working

By Jason - July 19, 2012

Hi,

If you could post an example URL to your page, I can take a look and see if I can point you in the right direction.


Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Fancybox not working

By cmsb - July 19, 2012

Hi Jason,

Not sure this is what you're asking for, but I am trying to get fancybox to work on this page first: http://www.mtgrovecemetery.org/aboutDetail.php

At this point, the uploaded thumbnail isn't even showing up. [unsure]

Re: [cmsb] Fancybox not working

By Jason - July 19, 2012

Hi,

I do see a problem where you are outputting your <img> tag into the href attribute of your <a> tag.

Try this:

<?php foreach ($aboutRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a class="fancybox" rel="group" title"sample" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /></a><br/>

<?php elseif ($upload['isImage']): ?>
<a class="fancybox" rel="group" href="<?php echo $upload['urlPath'];?>"><img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /></a><br/>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>

<?php endif ?>
<?php endforeach ?>


Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Fancybox not working

By cmsb - July 19, 2012

Thank you, Jason, that did work, though I have more to do to get the "fancy" part of fancybox working.

Many thanks!

Re: [Jason] Fancybox not working

By cmsb - July 19, 2012

Do you think you can tell me why the title is not showing? Many thanks.

http://www.mtgrovecemetery.org/aboutDetail.php

Re: [cmsb] Fancybox not working

By Jason - July 20, 2012

Hi,

The url you posted just shows a black page.

I took a look at the fancybox docs, and to get a title to show in your pop up, put the title in the title attribute of your <a> tag:

example:

<a href = "<?php echo $upload['urlPath'];?>" title = "<?php echo $upload['info1'];?>"> ...

Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Fancybox not working

By cmsb - July 22, 2012

Hi, Thank you, your suggestions have worked so far except the title is still not working. I think I have the title in the href already:

<div style="float:right">
<?php foreach ($aboutRecord['images'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<a class="fancybox" rel="group" id="#single_1" href="<?php echo $upload['urlPath'];?>"> <img src="<?php echo $upload['thumbUrlPath'] ?>" title="<?php echo htmlencode($upload['info1']) ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /></a><br/>
<?php echo htmlencode($upload['info1']) ?>
<br/>
<br/>
<?php elseif ($upload['isImage']): ?>
<a class="fancybox" rel="group" id="#single_1" href = "<?php echo $upload['urlPath'];?>"> <img src="<?php echo $upload['urlPath'] ?>" title="<?php echo htmlencode($upload['info1']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /> </a><br/>
<?php echo htmlencode($upload['info1']) ?>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>
</div><br />

Here is the page, which is working perfectly except the title isn't showing; http://www.mtgrovecemetery.org/aboutDetail.php. Interestingly, I've gotten the title to show but what happens is the image disappears from the page once I click on it. That is, the image pops up perfectly, with a perfect caption, but when I close the popup image, the image is no longer on the page.

Many thanks!