We help IT Professionals succeed at work.
Get Started
Gallerifffic.js photo gallery does not work in Safari - script uses jquery
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.
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 & 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: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ 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"> </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>
Why Experts Exchange?
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
Jim Murphy
Programmer at Smart IT Solutions
When asked, what has been your best career decision?
Deciding to stick with EE.
Mohamed Asif
Technical Department Head
Being involved with EE helped me to grow personally and professionally.
Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question
Connect with Certified Experts to gain insight and support on specific technology challenges including:
- Troubleshooting
- Research
- Professional Opinions
Did You Know?
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE