Slider mit Großbildfunktion

[fredolin]

Hallo Leute,

ich habe wieder mal ein Problem und hab schon soviel probiert und gegooglet. Doch ich finde keine Lösung. Nun frage ich Euch, ob Ihr mir da helfen könnt oder einen Gedankenanstoß geben könnt.

Was ist das Problem?
Den Slider den ich geschrieben habe funktioniert und nun soll auf die Bilder ein Link gelegt werden, der das geslide Bild dann auch per Click wie bei Lightgallery groß auf dem Screen darstellt.

Der Slider funktioniert tadellos und das Script was ich für den Click geschrieben habe, funktioniert auch bei einfachen Bilder (keine Galerie) ganz gut. (Anschauen unter http://www.webslay.eu - da auf der Startseite das Bild unten Rechts)

Der kleine Slider auf der Seite "Referenzen" ist.

Mein Code für das größerklicken des Bildes im Slider:

var globalGalPfad = imagepfad + 'referenzen/'; 
var counter01 = 0;
var galarray = new Array('ordner1/bildname', 'ordner2/bildname', 'ordner3/bildname', 'ordner4/bildname');
		
	$('.imageclick_gal').click(function() {
	        $('#image_overlay').removeClass('image_out');
		$('#bigPic').attr('src', globalGalPfad  + galarray[counter01] + ".jpg");
		//alert($('#bigPic').attr('src')); <--- Wenn dieses alert aktiv ist, wird das Bild angezeigt..:-(
			
	});

// der Code des kleinen Sliders
var currentPosition = 0;
var small_slide = $('.smallSlider_img');
var numbersOfSlide = small_slide.length;
var Slidewidth = '300px';
var maxSlidewidth = (parseInt(Slidewidth) * numbersOfSlide) + parseInt(Slidewidth);
	
$('.smallSlider_box').css({"width":maxSlidewidth});
if(currentPosition <= 0){ $("#left").css("display","none"); }
	
	
	function LeftSlide(){
		counter01--;
		if(currentPosition >=0 && currentPosition <= numbersOfSlide) {
			$('.smallSlider_box').animate({"margin-left":"+="+ Slidewidth}, 1500);
			currentPosition --;
			if(currentPosition == 0) {
				$('#left').hide();	
			}
			if(currentPosition <= numbersOfSlide) {
				$('#right').fadeIn(500);	
			}
		}
		
	}
	
	
	function RightSlide() {
		counter01++;
		//alert('My Counter:' + counter01);
		if(currentPosition >=0 && currentPosition <= numbersOfSlide) {
			$('.smallSlider_box').animate({"margin-left":"-="+ Slidewidth}, 1500);
			currentPosition ++;
			if(currentPosition == numbersOfSlide -1) {
				$('#right').hide();	
			}
			if(currentPosition == 1) {
				$('#left').fadeIn(500);	
			}
		}
	}
		
	$('#left').click(function() {
		LeftSlide();
		
	});
	
	$('#right').click(function() {
		RightSlide();
	});

Wie gesagt ich bin nun seit 3 Tagen dabei da eine Lösung zu finden, die ich aber nicht finde.

Hier noch der Code vom HTML in den das große Bild angezeigt wird:

<div id="image_overlay" class="image_out">
	<div class="image_overlay_conteainer">
    	<div class="image_overlay_header"></div>
        <div class="image_overlay_content"><img id="bigPic" src="<?php bloginfo('template_url')?>/image/"  /></div>
        <div class="image_overlay_footer"></div>
    </div>
</div>

#image_overlay {margin:0;padding:0;top:0px;position:fixed;width:100%;height:100%;z-index:101;display:table;background-color: rgba(254, 254, 254, 0.6);cursor:pointer;}
#image_overlay.image_out    { display: none;}
.image_overlay_conteainer	{margin:5% 25%;padding:0;width:auto;}

Das ist alles an Code was ich dafür benutze, aber es klappt nicht!..:-(

 

[Joe]

Eventuell CHMOD755 auf den Ordner Image machen? Ist jetzt nur geraten. Dein Code tut ja nur der Pfad stimmt nicht oder ist forbidden laut Webkonsole.

Beim großen Slider wirds nicht gehen können da ja bei Click die Funktionen zum sliden greifen. Ginge ja nur eins entweder sliden bei Click oder vergrößert öffnen.

 

[fredolin]

Hallo Joe,

danke für deine Antwort.. Aber es ist mir sehr peinlich zu sagen, wo der Fehler war.. Ich stell mich schon mal in die Ecke..

Das Script um die Bilder zu vergrößern benutze ich zweimal, wo ich nur den eventhändler tausche. Die Bilder liegen immer in einem DIV Conatainer mit der class "image".

So nun habe ich beim ersten Javascript den eventhändler nicht auf den classnamen im image-tag gelegt sonder auf den classname image.

Immer wenn ich dann im zweiten Javascript das Bild anklicke um es groß anzuzeigen, wurde es nicht angezeigt, da dann das erste Javascript die weitere verarbeitung übernommen hat und somit wurde der imagepfad für das großen Bild nicht übernömmen.. was ja auch logisch ist..

Ja somit habe ich das Problem selber lösen können und trotzdem bedanke ich mich bei allen. So bringt es mir sehr viel Spass und ich lerne auch selber eine Menge dazu.

Gruß
Fredolin