Bygger vidare i mitt tänk kring min kommande portfolio

Ja, det borde ju inte vara några problem alls

<a href="#" class="next">Nästa</a>
$(".next").click(function( e ) {
$(this).closest("explore-portfolio").hide().next().show();
});

Eller så kan du sätta en cssKlass eller något på dina portfolio clicks så du vet vilken du har tryckt på, gör en ny bind: hitta närmaste "back" knapp, triggar dess event, letar upp nästa "portoflio"-item och triggar dess event för att visa, då bygger du bara på de funktioner du redan har bundit på de existerande eventen.

Funderar på om man skulle kunan göra något liknande det här.

portfolio = {
	hoverIn: function(){
		$(this).find("img").fadeTo(360,0.30);
	},
	hoverOut: function() {
		$(this).find("img").fadeTo(360,1); 
	},
	open: function(e) {
		var id = this.id.split("-")[1];
		$("#"+ id).fadeIn(600);
		$("#"+ id + "-slider").nivoSlider({
			effect:'fade',
			animSpeed:150,
			manualAdvance:true,
			directionNav:true, 
			pauseOnHover:true
		});
		e.preventDefault();
	},
	nextProject: function() {
		var id = this.id.split("-")[1];
		$('.explore-portfolio').fadeOut(600,function(){$("#"+ id).next().fadeIn(600);});	
		return false;
	}
};

$('.next').click(portfolio.nextProject);

Men det gick inte ;(

Den bara fadar ut ena projektet men nästa kommer inte.

$('.explore-portfolio') => ge dig en kollektion av alla dina .explore-portfolio, så det är ju inte riktigt det du vill, du kan ta .explore-portfolio:visible kanske som selector istället?

Det blir inte mycket mer nu. Provade med :visible sedan tidigare men det vill sig inte. har ändrat ytterligare i min kod nu för att snygga till den lite.

$(document).ready(function() {		
	var
		carouselOptions = {
			width: 955,
			scroll: {
				items: 1,
				duration: 500,
				pauseOnHover: true,
				mousewheel: true
			},
			auto: {
				play: false,
				pauseDuration: 5000,
				delay: 2000
			},
			items: {
				visible: 4
			},
			prev: {	
				button	: "#portfolio-prev",
				key		: "left"
			},
			next: { 
				button	: "#portfolio-next",
				key		: "right"
			}
		},
		portfolio = {
			hoverIn: function(){
				$(this).find("img").fadeTo(360,0.30);
			},
			hoverOut: function() {
				$(this).find("img").fadeTo(360,1); 
			},
			openProject: function(e) {
				var id = this.id.split("-")[1];
				$("#"+ id).fadeIn(600);
				$("#"+ id + "-slider").nivoSlider({
					effect:'fade',
					animSpeed:150,
					manualAdvance:true,
					directionNav:true, 
					pauseOnHover:true
				});
				e.preventDefault();
			},
			closeProject: function() {
				$(".explore-portfolio").fadeOut(600,function(){$("#portfolio").fadeIn(600);});	
				return false;
			},
			nextProject: function() {
				var id = this.id.split("-")[1];
				$(".explore-portfolio:visible").fadeOut(600,function(){$("#"+ id).next().fadeIn(600);});	
				return false;
			}
		};

	// Portfolio
	
	$("#portfolio ul").carouFredSel(carouselOptions)
		.find("li")
			.hover(portfolio.hoverIn, portfolio.hoverOut)
				// .find("a")
					.click(portfolio.openProject);
					

	$(".portfolio-back").click(portfolio.closeProject);

	$(".next").click(portfolio.nextProject);

$(".next").click(portfolio.nextProject);

på .next elementen, har du ens ett id på dom? och i så fall hur ser HTML koden ut?

$(".explore-portfolio:visible").fadeOut(600).next().fadeIn(600);

känner mer korrekt ut du behöver inte ha: var id = this.id.split("-")[1]; eftersom du inte kommer använda dig av id:et ändå.

Jag har ju ett id - kolla nedan.

<div id="p01" class="explore-portfolio">
	<div class="text">
		<h1>Lorem ipsum dolor sit amet</h1>
					
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>

		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br>
					
		<a href="#" class="next">Nästa</a>

		<a href="#" class="portfolio-back">Back</a>
	</div>

       	<div class="screenshots">
					
		<div id="p01-slider" class="nivoSlider">
	         	<img src="img/projects/projects-01-a.jpg" alt="" title="This is an example of a caption.">
	         	<img src="img/projects/projects-01-b.jpg" alt="" title="This is an example of a caption 2.">
		</div>
					
	</div>
</div>

ser inget id på:

<a href="#" class="next">Nästa</a>

, men det spelar ingen roll, då du inte behöver det.

...
nextProject: function() {
				var id = this.id.split("-")[1];
..

this är referens till vilket objekt som triggade eventet, i ditt fall:

$(".next").click(portfolio.nextProject);

den aktuella .next elementet som du tryckte på, så this.id kommer crashar när du försöker splitar det, då det inte finns en träff.

Fick till det nu.

$(this).closest(".explore-portfolio").fadeOut(600).next().fadeIn(600);

Två saker till:

1. Previousfunktionen
2. Visa projektetsnamn vid mouseOnOver (next) respektive (Prev)

Testade med prev() istället för next() och det funkade kanon. Grejen är den att jag har en circularfunktion på carusellfunktionen och då finns det alltid en prev och en next. Nu går det inte att klicka på prev när man står vi första projektet. Går detta att lösa och hur i så fall?

1. Bind på rätt element, .next, .prev är kanske inte de bästa namnen, $(".explore-portfolio .portfolio-next") skriv så bättre css selectors för att hitta dina specifika element.

2. Ja, det gå väl också att lösa, men enklast är att bara sätta en alt text eller något på dom

3. Eftersom du binder dina "slide-show" också på click-event så kommer du inte få med dig slideshow looken när du kör dina funktioner just nu, det var därför jag hade hellre gjort som jag skrev från början, använd de event som redan finns och triggar dom istället.

Voigt, angåend epunkt 3: Exakt! Jag upptäckte detta ganska så fort. Har försökt att få laddat in det på samma sätt som jag gjort tidigare men det vill sig inte riktigt.

Sen få man kontrollera om det finns en prev, om inte så ta den sista istället för prev(), allt inom reglerna i en karusel

Hur kan jag lösa det hela med att ladda in nivoslidern då?

Är så nära nu, kommer inget vart. Jag får inte laddat in min nivoslider. Känns som om man testar allt, men sen kan jag ju väldigt lite också ;)

Har 30 min på sen bär det av mot stan och after work.

Jag hade gjort som jag skrev, triggar events istället för att bygga samma funktioner igen, jag få se om jag få tid att göra det till dig, men inte inom 30 minuter.

Är inte riktigt med på det där med att trigga events mer än vad som redan sker nu. Du får förklara för mig när du har tid nästa gång.

$("a:first").trigger("click"), $("a:first").click()

kommer clickar på första a-elementet och triggar dess click event.

Någon annan än Voigt som kanske kan hjälpa mig med detta? Tacksam för svar!