Fancybox not working
16 posts by 3 authors in: Forums > CMS Builder
Last Post: July 25, 2012 (RSS)
By Jason - July 22, 2012
Hi,
You need to put it in the title field of the <a> tag.
Give that a try.
You need to put it in the title field of the <a> tag.
Give that a try.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
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
[:)] That did it! Thank you very, very much. It's working perfectly now. Many thanks![;)]
Re: [Jason] Fancybox not working
By cmsb - July 23, 2012
Ugh![mad] Fancybox was working beautifullly last night but this morning all I get when I click on the pictures is a simple link to the larger image - no "fancy".
Here's the page link: http://www.mtgrovecemetery.org/aboutDetail.php
And here's the code:
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/usr/home/mtgrov/www/htdocs/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
// load records
list($aboutRecords, $aboutMetaData) = getRecords(array(
'tableName' => 'about',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$aboutRecord = @$aboutRecords[0]; // get first record
// show error message if no matching record is found
if (!$aboutRecord) {
header("HTTP/1.0 404 Not Found");
print "Record not found!";
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About Mountain Grove Cemetery</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Mountain Grove Cemetery Association, Bridgeport, Fairfield County, Connecticut, P.T. Barnum, cemetery" />
<meta name="description" content="New England’s most scenic cemetery, Mountain Grove is beautifully landscaped with ornamental trees and picturesque lily pond. Closely associated with Connecticut families from Fairfield County, it is the final resting place of P.T. Barnum, Charles Stratton (Tom Thumb), Fanny Crosby, and Daniel Nash Morgan, former Treasurer of the United States." />
<link href="mgc.css" rel="stylesheet" type="text/css">
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<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/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'inside'
}
}
});
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header"><img src="images/mgc_header.gif" alt="header" width="900" height="151" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="-1,-39,895,148" href="index.php" alt="mountain grove cemetery home page" />
</map>
<!-- end #header -->
</div>
<div id="insidenavigation"><img src="../images/mgc_nav_about_history.gif" alt="inside navigation"
width="900" height="56" border="0" usemap="#insidenavigation" />
<map name="insidenavigation" id="insidenavigation2">
<area shape="rect" coords="10,2,73,30" href="index.php" alt="mountain grove cemetery home page" />
<area shape="rect" coords="87,2,164,30" href="aboutDetail.php" alt="about mountain grove cemetery" />
<area shape="rect" coords="183,2,278,30" href="cremation_optionsDetail.php" alt="burial options" />
<area shape="rect" coords="303,2,481,30" href="read_chapelDetail.php" alt="read chapel" />
<area shape="rect" coords="510,2,665,30" href="interment_optionsDetail.php" alt="interment options" />
<area shape="rect" coords="761,2,889,30" href="bulletin_boardList.php" alt="bulletin board" />
<area shape="rect" coords="692,2,731,30" href="faqList.php" alt="Frequently Asked Questions" />
<area shape="rect" coords="12,36,141,63" href="aboutDetail.php" alt="burial options" />
<area shape="rect" coords="157,35,275,75" href="guide_mapDetail.php" alt="guidemap" />
<area shape="rect" coords="285,35,399,59" href="notablesDetail.php" alt="notables" />
<area shape="rect" coords="415,35,603,59" href="rrDetail.php" alt="rules and regulations" />
<area shape="rect" coords="769,35,884,64" href="contactDetail.php" alt="contact" />
<area shape="rect" coords="633,35,736,62" href="directionsDetail.php" alt="directions" />
</map>
</div>
<div id="mainContent">
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<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'];?>" title="<?php echo htmlencode($upload['info1']) ?>" >
<img src="<?php echo $upload['thumbUrlPath'] ?>"
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'];?>" title="<?php echo htmlencode($upload['info1']) ?>" >
<img src="<?php echo $upload['urlPath'] ?>"
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 />
<h1><span style="font-size: 21px; font-family:'Times New Roman', Times, serif; text-align: left;">About Us: The History of Mountain Grove Cemetery</span></h1>
<?php echo $aboutRecord['content'] ?><br/>
<?php if (!$aboutRecord): ?>
No record found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
<!-- end #container -->
</div>
</body>
</html>
Sorry to keep bugging you. I hope you can see what I'm doing wrong. Thanks!
Here's the page link: http://www.mtgrovecemetery.org/aboutDetail.php
And here's the code:
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('/usr/home/mtgrov/www/htdocs/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
// load records
list($aboutRecords, $aboutMetaData) = getRecords(array(
'tableName' => 'about',
'where' => whereRecordNumberInUrl(1),
'limit' => '1',
));
$aboutRecord = @$aboutRecords[0]; // get first record
// show error message if no matching record is found
if (!$aboutRecord) {
header("HTTP/1.0 404 Not Found");
print "Record not found!";
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About Mountain Grove Cemetery</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Mountain Grove Cemetery Association, Bridgeport, Fairfield County, Connecticut, P.T. Barnum, cemetery" />
<meta name="description" content="New England’s most scenic cemetery, Mountain Grove is beautifully landscaped with ornamental trees and picturesque lily pond. Closely associated with Connecticut families from Fairfield County, it is the final resting place of P.T. Barnum, Charles Stratton (Tom Thumb), Fanny Crosby, and Daniel Nash Morgan, former Treasurer of the United States." />
<link href="mgc.css" rel="stylesheet" type="text/css">
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<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/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'inside'
}
}
});
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header"><img src="images/mgc_header.gif" alt="header" width="900" height="151" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="-1,-39,895,148" href="index.php" alt="mountain grove cemetery home page" />
</map>
<!-- end #header -->
</div>
<div id="insidenavigation"><img src="../images/mgc_nav_about_history.gif" alt="inside navigation"
width="900" height="56" border="0" usemap="#insidenavigation" />
<map name="insidenavigation" id="insidenavigation2">
<area shape="rect" coords="10,2,73,30" href="index.php" alt="mountain grove cemetery home page" />
<area shape="rect" coords="87,2,164,30" href="aboutDetail.php" alt="about mountain grove cemetery" />
<area shape="rect" coords="183,2,278,30" href="cremation_optionsDetail.php" alt="burial options" />
<area shape="rect" coords="303,2,481,30" href="read_chapelDetail.php" alt="read chapel" />
<area shape="rect" coords="510,2,665,30" href="interment_optionsDetail.php" alt="interment options" />
<area shape="rect" coords="761,2,889,30" href="bulletin_boardList.php" alt="bulletin board" />
<area shape="rect" coords="692,2,731,30" href="faqList.php" alt="Frequently Asked Questions" />
<area shape="rect" coords="12,36,141,63" href="aboutDetail.php" alt="burial options" />
<area shape="rect" coords="157,35,275,75" href="guide_mapDetail.php" alt="guidemap" />
<area shape="rect" coords="285,35,399,59" href="notablesDetail.php" alt="notables" />
<area shape="rect" coords="415,35,603,59" href="rrDetail.php" alt="rules and regulations" />
<area shape="rect" coords="769,35,884,64" href="contactDetail.php" alt="contact" />
<area shape="rect" coords="633,35,736,62" href="directionsDetail.php" alt="directions" />
</map>
</div>
<div id="mainContent">
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<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'];?>" title="<?php echo htmlencode($upload['info1']) ?>" >
<img src="<?php echo $upload['thumbUrlPath'] ?>"
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'];?>" title="<?php echo htmlencode($upload['info1']) ?>" >
<img src="<?php echo $upload['urlPath'] ?>"
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 />
<h1><span style="font-size: 21px; font-family:'Times New Roman', Times, serif; text-align: left;">About Us: The History of Mountain Grove Cemetery</span></h1>
<?php echo $aboutRecord['content'] ?><br/>
<?php if (!$aboutRecord): ?>
No record found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
<!-- end #container -->
</div>
</body>
</html>
Sorry to keep bugging you. I hope you can see what I'm doing wrong. Thanks!
By Jason - July 23, 2012
Hi,
It looks like you're missing a closing brace in your javascript.
Try this:
Hope this helps
It looks like you're missing a closing brace in your javascript.
Try this:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'inside'
}
}
});
}
</script>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/
Jason Sauchuk - Project Manager
interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By InHouse - July 24, 2012
Just having a quick peek in here and it doesn't look like the Fancybox directory (from which the js and css are being called) are on your server. You should be able to view the CSS file for example, by browsing to:
http://www.mtgrovecemetery.org/fancybox/source/jquery.fancybox.css
same applies to the javascript libraries (.js files)
Also, you don't need to call both the packed and unpacked .js libs. One is enough. They are both the same thing, just that the packed one has had all the unused characters removed to make it smaller.
Lastly, you're actually calling the Fancybox .css file twice also.
Although none of these duplications will stop the script from working, they may lead to confusion and extra page load weight.
The lack of the libraraies and CSS files on the server will be a showstopper though. It looks that way currently. The larger image is being displayed, but not using the Fancybox javascript.
Hope this helps,
J.
http://www.mtgrovecemetery.org/fancybox/source/jquery.fancybox.css
same applies to the javascript libraries (.js files)
Also, you don't need to call both the packed and unpacked .js libs. One is enough. They are both the same thing, just that the packed one has had all the unused characters removed to make it smaller.
Lastly, you're actually calling the Fancybox .css file twice also.
Although none of these duplications will stop the script from working, they may lead to confusion and extra page load weight.
The lack of the libraraies and CSS files on the server will be a showstopper though. It looks that way currently. The larger image is being displayed, but not using the Fancybox javascript.
Hope this helps,
J.
Re: [InHouse] Fancybox not working
By cmsb - July 25, 2012
Hi Jason,
Thanks so much. I found my error and it is now working perfectly.
Many, many thanks. I hope you have a great day today! You've made my day![:)]
Thanks so much. I found my error and it is now working perfectly.
Many, many thanks. I hope you have a great day today! You've made my day![:)]