Using jquery image viewer within AJAX tabbed content

JavaScript
1

Hello everyone,
Some help would be much appreciated with an issue I have using Fancybox image viewer within an externally pulled AJAX content div.

I have 4 tabs which are loaded via AJAX, 3 of them from external html files. Within these tabs I have a number of images in a gallery.

When the page is loaded initially, the Fancybox works fine, but when I click on another tab, ie pull in external content, and click on an image it loads in another window.

Seems like the new content pulled isnt hooked up to the Fancybox trigger…can someone please point me in right direction.

The code is detailed below, I need some kind of call on the AJAX to trigger FB???



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canavan Interiors | design your life | see if for yourself</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />

<script type="text/javascript" src="fancybox/fancyboxextract.js"></script>
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js"></script>

</head>

<body>
<div id="mainWrapper">
<div id="header">
<div class="headerLeft"></div>
<div class="phone"></div>
<div class="email"></div>
<div class="vcard"></div>
</div>

<div id="menu">

<div class="home"><a href="index.html"></a></div>
<div class="nav">
<ul>
<li><a href="work.html">how we work</a></li>
<li><a style="background-image:url(images/navBGhov.gif); color:#000000;" href="#">gallery</a></li>
<li><a href="notjustkitchens.html">not just kitchens</a></li>
<li><a href="appliances.html">appliances</a></li>
<li><a href="news.html">news</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="testimonials.html">testimonials</a></li>

</ul>
</div>
<input name="" style="border:1px solid #333;padding:6px 5px 6px; width:100px; float:left; color:#666; font-size:11px; margin-right:2px;" value="Search for Product" type="text" />
<div class="search"><a href="/"></a></div>
</div>

<div id="submenu">

<h2>Choose a Kitchen</h2>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Edenderry, Belfast</a></li>
<li><a href="gallery/balmoral.html" rel="countrycontainer">Balmoral, Belfast</a></li>
<li><a href="gallery/kitchen3.html" rel="countrycontainer">Kitchen 3</a></li>

<li><a href="gallery/kitchen4.html" rel="countrycontainer">Kitchen 4</a></li>
</ul>
<br/><br/>
<p style="color:#999999; font-size:11px; font-weight: normal;"><span style="color:#FFFFFF; font-weight:bold; font-size:12px;">TIP:</span>
When you have clicked on an image to enlarge, hovering over this image (left for previous &amp; right for next) will display options for navigating through the entire gallery.</p>




</div>
<div id="submain_gallery_wrap">

<div id="submain_gallery">
<h2>You are viewing Edenderry, Belfast</h2>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/1s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/2b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/2s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/3s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/4s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/5s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/6s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/7s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/8s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/9s.jpg" border="0" /></a></div>
<div class="galleryimg"><a rel="example_group" href="gallery/edenderry/1b.jpg" title="Lorem ipsum dolor sit amet"><img src="gallery/edenderry/10s.jpg" border="0" /></a></div>
<div style="clear:both"></div>
<br/>
<p>Gavin was creating a kitchen that would fit beautifully into his minimalist open plan style living in the beautiful, historic village of Edenderry. His home is an end of terrace Victorian property that had undergone renovations to bring it bang up to date.</p>

<p>Gavin’s kitchen is (insert name / style and any specific design features), a spectacular finish, his kitchen is now the talking point of the home. Under-lighting gives his run of units a ‘weightlessness’, floating beautifully in the space he has created. </p>



</div>
</div>
<div class="footerLeft"><p>Privacy Policy | Terms &amp; Conditions | Sitemap</p></div>
<div class="footerRight"><p>Vat Reg No. 673220355 | &copy; Canavan Interiors 2010</p></div>


</div>
<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init(10000)

</script>


</body>
</html>

thanks very much for your time

2

wait a minute, instead of loading full html tags everytime, you can just ajax load a new image path. You don’t have to re-register the image with fancybox anymore. that would be more efficient coding as well.

3

Look like the later elements aren’t registered with function fanycbox.

What you can do is, read the fancybox document to see how to make it work with future added elements. If there aint such document, I suggest you contact the plugin author, ask him how to.

Or find other box plugin that work with future added elements. I believe there is at least one plugin work with ajax, I’ve come across once, but don’t remember where. Keep your search on!

4

Hello,
thanks very much for your help,
the page is in test at http://www.canavaninteriors.co.uk/test/gallery.html

5

Do you have a live page ?

6

This is a preferred function, the gallerys load every ten seconds

7

first of all, you need to fix the ajax code, right now, the images auto-reload every 10 seconds, and I didn’t even click anything.