Dynamic content generation breaks image slider.

Dynamic content generation breaks image slider.

Hi,

I'm very new to this, I have been modifying a wordpress theme and I have come across an issue.
The page I am working on is a portfolio page, It uses dynamic content generation.
It pulls up all portfolio posts. I have added an image slider to each portfolio post.
My original problem was that only the first portfolio items slider would work and the rest would not load.
So I changed the script for the page to get it to call up the new slider for each project.
My problem now is that if I click back onto a project I have already viewed it calls up the slider again and doubles the amount of slides in the post and breaks the slider.
Does anyone have any suggestions on how I can fix this?
Any help would be greatly appreciated.

The page can be viewed here

This is what I added to the script to make it call up the slider for each post:

  1. $( '.thethe_image_slider' ).each( function (){
             var theTheImageSlider = new thetheImageSlider();
             theTheImageSlider.init( $( this ).attr( 'id' ) );
         });

This is the whole script:

  2. /**
  3.  * Portfolio previewer-  displays previews of the portfolio
  4.  * items separated by pages and adds a functionality for displaying a post after
  5.  * clicking on the smaller preview
  6.  * 
  7.  * @author Pexeto http://pexeto.com
  8.  */

  10. (function($){
  11. $.fn.portfolioPreviewer=function(options){
  12. // main default settings
  13. var defaults={
  14. itemnum : 6,
  15. pageWidth : 270,
  16. speed : 500, // will be overwritten by the XML data
  17. catId : -1,
  18. autoThumbnail:'on'
  19. };

  22. var options=$.extend(defaults, options);
  24. // data containers
  25. var items = [], divContainer, firstColumn, wrapper, pageWrappers = [], currentShown = 0, ie=$.browser.msie, maxWrapperHeight=0,images=[], inAnimation=false;
  26. var root=$(this);

  28. /**
  29. * Parses the data from the XML file, creates objects from the data and
  30. * saves the objects into arrays.
  31. */
  32. var parseData = function() {
  35. $('.portfolio-showcase-item').each(
  36. function(i) {
  38. var current = $(this),
  39. post = {};
  41. // create the object for the post
  42. post.obj = current.find('.preview-item:first');
  43. post.html = post.obj.html();
  44. post.smallObj = current.find('.showcase-item:first');

  46. items.push(post);
  47. });
  49. if (items.length > 0) {
  50. displayContent();
  51. bindEventHandlers();
  52. }
  54. };


  57. /**
  58. * Displays the main content of the items container.
  59. */
  60. var displayContent = function() {
  61. firstColumn = $('<div id="portfolio-preview"><div class="loading"></div></div>');
  62. var secondColumn = $('<div class="portfolio-sidebar"><h4>'+options.more+'</h4><div class="double-line"></div><div id="portfolio-wrapper"></div></div>');
  63. $('.preview-items').detach();
  64. root.html('').append(firstColumn).append(secondColumn);
  65. wrapper = secondColumn.find('#portfolio-wrapper');

  67. // show the first post
  68. showFirstPost();

  70. // show the other posts from the right
  71. displayPostList();
  73. pexetoSite.loadCufon();
  74. };

  76. var showFirstPost = function(post) {
  77. firstColumn.html(items[0].obj);
  78. };

  80. /**
  81. * Displays all the smaller post previews to the right, separated by pages.
  82. */
  83. var displayPostList = function() {

  85. for ( var i = 0; i < items.length; i++) {
  86. if (i % options.itemnum === 0) {
  87. var pageWrapper = $('<div class="portfolio-items"></div>');
  88. pageWrappers.push(pageWrapper);
  89. wrapper.width(wrapper.width() + 500);
  90. wrapper.append(pageWrapper);
  91. }
  92. var post = items[i].smallObj;
  94. pageWrappers[pageWrappers.length - 1]
  95. .append(post);
  98. }

  100. if (items.length > options.itemnum) {
  101. setWrapperHeight();
  102. showNavigation();
  103. }

  105. setPostClickHandlers();
  106. };
  108. var setWrapperHeight = function(){
  109. for(var i=0,length=pageWrappers.length; i<length; i++){
  110. if(pageWrappers[i].height()>maxWrapperHeight){
  111. maxWrapperHeight=pageWrappers[i].height();
  112. }
  114. wrapper.height(maxWrapperHeight);
  115. }
  116. }
  118. /**
  119. * Binds a change slide event handler to the wrapper so that when a navigation button has been clicked,
  120. * to change the slide according to the index of the slide to be displayed.
  121. */
  122. var bindEventHandlers=function(){
  123. wrapper.bind('changeSlide', function(e, index){
  124. if(!inAnimation){
  125. //it is not currently animated, do the animation now
  126. inAnimation=true;
  127. $('.portf-navigation').trigger('slideChanged', [index]);
  128. var margin = - index * (options.pageWidth + 31);
  129. wrapper.animate( {
  130. marginLeft :  margin
  131. }, options.speed, function(){
  132. currentShown=index;
  133. inAnimation=false;
  134. });
  135. }
  136. });
  137. }


  140. /**
  141. * Shows the pagination below the smaller post previews.
  142. */
  143. var showNavigation = function() {
  144. var paginationHolder=$('<div id="portfolio-big-pagination" class="hover"></div>').appendTo(wrapper.parent()),
  145. ul=null,
  146. pageNumber=pageWrappers.length,
  147. selectedClass='selected';
  149. // set the next button click handler
  150. $('<a />', {'class':'alignright', 'id':'next-item'})
  151. .click(function(event) {
  152. event.preventDefault();
  153. if (currentShown < pageWrappers.length - 1) {
  154. wrapper.trigger('changeSlide', [currentShown+1]);
  155. }
  156. }).appendTo(paginationHolder);

  158. // set the previous button click handler
  159. $('<a />', {'class':'alignright', 'id':'prev-item'})
  160. .click(function(event) {
  161. event.preventDefault();
  162. if (currentShown !== 0) {
  163. wrapper.trigger('changeSlide', [currentShown-1]);
  164. }
  165. }).appendTo(paginationHolder);
  168. //build the navigation buttons
  169. ul=$('<ul />', {'class':'portf-navigation'}).appendTo(paginationHolder);
  171. var html='';
  172. while(pageNumber--){
  173. html+='<li></li>';
  174. }
  176. ul.bind('slideChanged', function(event, index){
  177. $(this).find('li').removeClass(selectedClass).eq(index).addClass(selectedClass);
  178. })
  179. .append(html).find('li').click(function(){
  180. if(currentShown!=$(this).index()){
  181. wrapper.trigger('changeSlide', [$(this).index()]);
  182. }
  183. }).eq(0).addClass(selectedClass);
  184. };

  186. /**
  187. * Sets post click handlers to the smaller previews. When a small preview post is clicked
  188. * the whole content of the post is shown to the left.
  189. */
  190. var setPostClickHandlers = function() {
  191. var itemsNumber = items.length;
  192. for ( var i = 0; i < itemsNumber; i++)
  193. (function(i) {
  194. items[i].smallObj.each(function(j) {
  195. $(this).bind(
  196. {
  197. 'click' : function() {
  198. var current = items[i];
  199. firstColumn.html(current.obj);
  200. $('.thethe_image_slider').each(function(){
  201.         var theTheImageSlider = new thetheImageSlider();
  202.         theTheImageSlider.init( $(this).attr('id') );
  203.     });
  204. pexetoSite.loadCufon();
  205. pexetoSite.setLightbox(jQuery("a[rel^='lightbox'],a[rel^='lightbox[group]']"));
  206. },
  207. 'mouseover' : function() {
  208. $(this).css( {
  209. cursor : 'pointer'
  210. });
  211. }
  212. });
  213. });
  214. })(i);

  216. };
  218. if(root.length){
  219. parseData();
  220. }

  222. };
  223. }(jQuery));