Fancybox not working
16 posts by 3 authors in: Forums > CMS Builder
Last Post: July 25, 2012 (RSS)
By cmsb - July 19, 2012
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
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
Re: [cmsb] Fancybox not working
By Jason - July 19, 2012
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
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
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
Many thanks!
Re: [Jason] Fancybox not working
By cmsb - July 19, 2012
http://www.mtgrovecemetery.org/aboutDetail.php
Re: [cmsb] Fancybox not working
By Jason - July 20, 2012
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
<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!