Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Jquery Slideshow And Swapcontent()

jQuery jquery

  • Please log in to reply
No replies to this topic

#1 Thevenin

Thevenin

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 66 posts

Posted 15 May 2012 - 02:21 AM

Hi all, I really need some help.

I am making a website with horizontal scroll (working!), then I am using a jQuery Slideshow (called Camera), and I combined this with the horizontal scrolling website.
When I select the page I want from the menu, the website scrolls to right and automatically it loads from database a list of images in the Slideshow.

I have a menu with some button and each button call this "swapContent(cv)" function:
function swapContent(cv) {
	$(".camera").html("Loading...").show();
	var url = "evaluation_menu.php";
	$.post(url, {contentVar: cv}, function(data) {
		$(".camera").html(data).show();
		$('.camera').camera({
			pagination: false
		});
	});
}

HTML code:
<a class="next page" title="Title 1" href="#page" onClick="return false" onmousedown="javascript:swapContent('title1');"><div id="title1"></div></a>
<a class="next page" title="Title 2" href="#page" onClick="return false" onmousedown="javascript:swapContent('title2');"><div id="title2"></div></a>

The menu is in the homepage and in the other page (just one page), but every time I click on a button it seems that the "camera" div is replicated inside x1, x2 and so on.

So I thought something like a refresh of the ".camera" div and then load the new content selected from the menu; but using "location.reload()", the reload works correctly, but not load the selected content.

Yesterday I thought to using a tabbed Ajax function, I found on a website some code:

$(function(){
$("a[rel='tab']").click(function(e){
  e.preventDefault();
  
  //if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
  //if commented, html5 nonsupported browers will reload the page to the specified link.


  //get the link location that was clicked
  pageurl = $(this).attr('href');

  //to get the ajax content and display in div with id 'content'
  $.ajax({url:pageurl+'?rel=tab',success: function(data){
   $('#wrap-content').html(data);	  
  }});

  //to change the browser URL to 'pageurl'
  if(pageurl!=window.location){
   window.history.pushState({path:pageurl},'',pageurl);
  }
  return false;
});
});
// the below code is to override back button to get the ajax content without reload
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
  $('#wrap-content'').html(data);
}});
});

HTML code:
<a class="next page" title="Title 1" href="#page" onClick="return false" onmousedown="javascript:swapContent('title1');" rel="tab"><div id="title1"></div></a>

This tabbed things works, pretty well, but don't know if and how to mix it with my code.

Any hint/help is really appreciated.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download