Gallerifffic.js photo gallery does not work in Safari - script uses jquery Solutions

Here's the original script:
http://www.twospy.com/galleriffic/index.html

This is the page where I'm using the script - works great in IE and FF.
http://kathrynireland.com/projects/index.php

The thumbs and enlarged seem like they're endlessly trying to load.

<!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" xml:lang="en-gb" lang="en-gb" >
<head>
  <base href="http://kathrynireland.com/photogallerytest/projects.php" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="los angeles interior design, french linens, decorator pillows, french country linens, santa monica interior design, hand made pillows" />
  
  <meta name="author" content="Mary" />
  <meta name="description" content="Our Los Angeles Interior Design firm offers French Country Linens and Decorator Pillows online. For Santa Monica Interior Design &amp; Hand Made Pillows call 310-399-0300." />
  
  <title>Greta Wallpaper | Wallpaper</title>

  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/caption.js"></script>

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/kathrynIreland/css/template.css" type="text/css" />
<!--css and js for photo gallery-->
<link rel="stylesheet" href="css/basic.css" type="text/css" />
		<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
		<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
		<!-- We only want the thunbnails to display when javascript is disabled -->
		<script type="text/javascript">
			document.write('<style>.noscript { display: none; }</style>');
		</script>
<!--eof css and js for photo gallery-->

<style type="text/css">
<!--
.pressLanding td {
	font-size: 13px;
	font-weight:bold;
	padding:20px 40px 0 0;
	font-family:Trajan Pro, Verdana, Arial, Helvetica, sans-serif;
}
.pressLanding td a{
font-family:Trajan Pro, Verdana, Arial, Helvetica, sans-serif;
}
.pressLanding td  a:link, .pressLanding td a:visited{
text-decoration:none;
color:#bf1e2d;
}
.pressLanding td a:hover, .pressLanding td a:active{
text-decoration:underline;
color:#000;
}
table.pressLanding{margin-left:auto; margin-right:auto;}
-->
</style>

<script language="javascript" type="text/JavaScript">

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
<meta http-equiv="Content-Language" content="en" /></head>

<body>
<div id="main">
	<div id="header">
	    <p align="left"><img src="/templates/kathrynIreland/images/logo_new.gif"  alt="Los Angeles Interior Design - French Country Linens, Decorator Fabrics & Pillows" />	</p>
	</div>
<!--header completed-->

	<div id="topmenu">
			<div class="moduletable">
					<ul class="menu"><li class="item2"><a href="http://kathrynireland.com/"><span>HOME</span></a></li><li class="item3"><a href="/NEW-COLLECTIONS/new-collections.html"><span>FABRIC</span></a></li><li id="current" class="active item90"><a href="/Wallpaper/greta-wallpaper.html"><span>WALLPAPER</span></a></li><li class="item5"><a href="/Application/opening-shot.html"><span>APPLICATIONS</span></a></li><li class="item4"><a href="/component/option,com_atomicongallery/Itemid,4/view,atomicongallery/"><span>PROJECTS</span></a></li><li class="item17"><a href="/kathrynIreland/showrooms.html"><span>SHOWROOMS</span></a></li><li class="item7"><a href="/kathrynIreland/recent-press.html"><span>PRESS</span></a></li><li class="item8"><a href="/kathrynIreland/info.html"><span>INFO</span></a></li></ul>		</div>

	
  </div>
  
<!--menu completed-->

	<div id="contentProjectsGallery">
	
	<!--photo gallery code start-->
	

				<!-- Start Advanced Gallery Html Containers -->
				<div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div class="slideshow-container">
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
					<div id="caption" class="caption-container"></div>
				</div>
				<div id="thumbs" class="navigation">
					<ul class="thumbs noscript">
												  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/1.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/1.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/10.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/10.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/11.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/11.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/12.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/12.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/13.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/13.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/14.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/14.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/15.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/15.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/16.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/16.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/18.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/18.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/19.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/19.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/2.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/2.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/20.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/20.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/21.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/21.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/22.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/22.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/23.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/23.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/24.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/24.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/25.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/25.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/26.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/26.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/27.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/27.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/28.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/28.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/29.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/29.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/3.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/3.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/30.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/30.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/31.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/31.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/32.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/32.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/33.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/33.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/34.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/34.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/35.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/35.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/4.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/4.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/41.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/41.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/42.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/42.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/43.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/43.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/44.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/44.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/46.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/46.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/47.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/47.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/48.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/48.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/5.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/5.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/51.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/51.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/52.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/52.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/53.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/53.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/54.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/54.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/55.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/55.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/56.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/56.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/57.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/57.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/58.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/58.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/59.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/59.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/6.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/6.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/7.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/7.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/8.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/8.jpg" /></a></li>
						  						  <li><a class="thumb" name="leaf" href="http://kathrynireland.com/images/projects-dw/9.jpg"> <img src="http://kathrynireland.com/images/projects-dw/thumbs/9.jpg" /></a></li>
						  					</ul>
				</div>
				<div style="clear: both;"></div>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({'width' : '300px', 'float' : 'left'});
				$('div.content').css('display', 'block');

				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onMouseOutOpacity = 0.67;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionSelector: '.selected'
				});
				
				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 15,
					preloadAhead:              10,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          true,
					renderNavControls:         true,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '&lsaquo; Previous Photo',
					nextLinkText:              'Next Photo &rsaquo;',
					nextPageLinkText:          'Next &rsaquo;',
					prevPageLinkText:          '&lsaquo; Prev',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 900,
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('fast', 1.0);
					}
				});
			});
		</script>
	<!--photo gallery code end-->
	
	</div>
<!--content completed-->
<div class="footer" id="footerbg">&nbsp;</div>

</div>

<!--footer completed-->
<div class="clear"></div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :
"http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost +
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10978607-1");
pageTracker._trackPageview();
} catch(err) {}</script>

	
</body>
</html>

Open in new window

View Solution Only

phillystyle123

Commented: 2010-06-15

This is the solution for why the Gallerific photo gallery wasn't working for me in Safari: I moved my gallerific related js to the top of the page just under the <title> tag:

<title>Kathryn Ireland | Projects</title>


<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
                        <script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

<script type="text/javascript">

When it wasn't working, the gallerific related js was listed under the other external js:

<title>Greta Wallpaper | Wallpaper</title>

<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/kathrynIreland/css/template.css" type="text/css" />

<link rel="stylesheet" href="css/basic.css" type="text/css" />
            <link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
            <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
            <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
            <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
            
            <script type="text/javascript">
                  document.write('<style>.noscript { display: none; }</style>');
            </script>


document.write('<style>.noscript { display: none; }</style>');
</script>

Gallerifffic.js photo gallery does not work in Safari - script uses jquery

Premium Content

Premium Content

View Solution Only