Using jquery image viewer within AJAX tabbed content

**jmccarroll** · 09-17-2010, 08:32 AM

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???

Code:

<!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

**jscheuer1** · 09-18-2010, 04:42 AM

Unless I missed something your post doesn't contain enough information for a precise answer. For that I would probably need a link to the page, at the very least the code used to initialize fancybox and an exemplar of the HTML code of an imported page.

That said, where you have:

Code:

<script type="text/javascript">

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

</script>

Do like (addition highlighted):

Code:

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.onajaxpageload = function(){
	//put code here to init imported content to fancybox
};
countries.init(10000)

</script>

Replace the green comment line with the fancybox init (these can be many and/or various depending upon how you've set things up visa vis fancybox). Something like:

Code:

	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});

Use the one you have that initializes the page originally, it will probably be fine.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**jmccarroll** · 09-19-2010, 07:14 PM

Thanks so much for your reply John,
the page which I am having difficulty with is at -

http://canavaninteriors.co.uk/test/gallery.html

Youll see what i mean when I say the fancybox loses its functionality after I use the ajax tabs to the left.

I have tried your solution here but still nothing, now the tabs dont work!

I've taken the fancybox out into fancyboxextract.js, presuming I need to put some of this back into the ajax script like you said but I cant figure it out.

Really appreciate your help mate.

Joe

**jscheuer1** · 09-19-2010, 11:18 PM

In the fancyboxextract.js file, all that appears to be required is:

Code:

jQuery(function($){
	$("a[rel=example_group]").fancybox({
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'titlePosition' : 'over',
		'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});
});

The highlighted is the init. The other part (I've condensed that and made it potentially friendy to other scripts) simply says to do this once the document is ready. Back up your current fancyboxextract.js file and replace its contents with the above code block, all of the above (highlighted and not highlighted).

Now, if after adding whatever you thought I said to do to the:

Code:

<script type="text/javascript">

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

</script>

on page script broke it, an error must have been introduced. Once you've simplified fancyboxextract.js as directed and make sure that it still works for the first tab before the tabs cycle, change the above code to:

Code:

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.onajaxpageload = function(){
	jQuery("a[rel=example_group]").fancybox({
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'titlePosition' : 'over',
		'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});
};
countries.init(10000);
jQuery('a[rel=#default]').click(function(){setTimeout(countries.onajaxpageload, 0)});

</script>

If that doesn't take care of it for you, upload it to a test area so I can check our work. Yes, our work. Either of us may have made a mistake as I cannot easily check remote AJAX locally. However, according to limited testing, and what I know of these scripts in particular, plus their documentation, and javascript/jQuery in general, this is the way to go.

**beebogates** · 05-31-2011, 04:04 PM

I see you managed to get it working on the Patrick Canavan Website.. how did you do that? I've been staring at the source code on there for the good part of an hour and I'm still not getting it! I need this for a webapp I'm building for my thesis so any help is appreciated!

**jscheuer1** · 06-01-2011, 04:45 AM

It's our policy here at Dynamic Drive Forums not to help people with their homework.

Thread: Using jquery image viewer within AJAX tabbed content

Thread Tools

Search Thread

Using jquery image viewer within AJAX tabbed content

link to problematic test site

How did you do it?

Bookmarks

Bookmarks

Posting Permissions