Image Crawler arbeitet nur einmal...

Darian

Erfahrenes Mitglied
Hallo Leute,

habe vor kurzen einen coolen Image Crawler gefunden, diesen gleich in meine Bildergallerie eingebaut, und mich über das, dass alles zu funktionieren scheint, gefreut.

Folgenden Crawler verwende ich: CrawlerLink zum Text and Image

Beim ersten Start funktioniert alles super, man kann mit den Buttons scrollen, und auch die Bilder werden beim Click geladen.

Wenn ich jetzt die Kategorie wechsle, erscheinen nicht mehr alle Bilder, es sieht abgeschnitten aus, und es funktioniert auch kein Scrollen mehr. (siehe Anhang)

Ich habe die div Box gecheckt, die bleibt aber genau so groß wie vorher, daran liegt es also eher nicht.

Hier nun noch einen Code, der sicher nicht gerade gut ist, habe mir das so irgendwie zusammen getragen, und viel herum probiert:

Code:
// JavaScript Document

/*
* Functions for the gallery
*/

var selected_service;

$(document).ready(function() {

	$(".gallery_entry").click(function() {
		id = $(this).attr('id');
		
		loadprojects(id);
	});
});

function loadprojects(id) {
	$("#gallery_projects").load("sites/gallery/projects.php", "service="+id, loadProjectFunctions);
	selected_service = id;
}

//Nicht gerade eine kluge lösung; aber ich brauche einen Schalter, beim ersten mal wird was anderes geladen wie sonst.
//Damit er nicht in #thumbnails und .marquee0 lädt und auch den Crawler nur einmal initialisert.

var first_start = true;

function loadProjectFunctions() {
	$(".project_entry").click(function() {
	
		id = $(this).html();
		
		//delete old marquee crawler
		//marqueeInit.ar = [];
		
		//load the correct thumbnails
		
		if(first_start == true) {
			$("#thumbnails").load("sites/gallery/pics.php", "project="+id+"&service="+selected_service, loadThumbnailFunctions);
		}
		else {
			$(".marquee0").load("sites/gallery/pics.php", "project="+id+"&service="+selected_service, loadThumbnailFunctions);
		}
		
		//Load info text
		result = $("#gallery_text").load("fotos/gallery/"+selected_service+"/"+id+"/info.html");
		
	});
}

function initCrawler() {
	
	marqueeInit({
		uniqueid: 'thumbnails',
		inc: 3, //speed - pixel increment for each iteration of this marquee's movement
		mouse: 'pause', //mouseover behavior ('pause' 'cursor driven' or false)
		stopMarquee: true,
		moveatleast: 2,
		neutral: 150,
		noAddedSpace: true,
		savedirection: true
	});
	
}

//Diese Variable brauche ich um den neuen Bilder Link vom Ausblenden zu der changePichture Funktion zu übergeben
var link;

function loadThumbnailFunctions() {
	
	//start the crawler and button controls
	if (first_start == true) {
		initCrawler();
		first_start = false;
	}
	
	init_control_buttons();
	
	//Handler der bei Click die Bilder ausblendet, und das laden startet
	$(".thumb").click(function() {
		
		link = $(this).attr('src');
		$("#gallery_main").fadeOut("slow", changePicture);
	});
	
}

function changePicture() {
		
		link = link.replace(/thumbs\//, "");
		
		//html = "<img src='"+link+"' width='485' height='340'></img>";
		html = "<img src='"+link+"' height='340'></img>";
		
		$("#gallery_main").html(html);
		
		$("#gallery_main").fadeIn("slow");
}

function init_control_buttons() {
	
	$("#button_left").mouseover(function() {
		marqueeInit.ar[0].direction = 'right';
		marqueeInit.ar[0].stopMarquee = false;
	
	});
	
	$("#button_right").mouseover(function() {
		marqueeInit.ar[0].direction = 'left';
		marqueeInit.ar[0].stopMarquee = false;
	
	});
}

Bin für jeden Tipp und Verbesserungsvorschlag dankbar.

lg und thx
Darian
 

Anhänge

  • crawler.jpg
    crawler.jpg
    30,4 KB · Aufrufe: 57
Hallo Leute,

habe gerade noch etwas interessantes bemerkt, und auch eines der Probleme gelöst.

Das Programm erstellt beim ersten start folgenden Inhalt:

HTML:
<div style="overflow: hidden;" class="marquee0">
	<div style="margin: 0pt auto; overflow: hidden; visibility: visible; width: 100%; height: 99px; position: relative;">
    	<div style="position: absolute; left: -98px; white-space: nowrap; top: 2px;">
        <img style="display: inline; vertical-align: top;" class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/1.jpg" height="95">
        <img style="display: inline; vertical-align: top;" class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/2.jpg" height="95">
        <img style="display: inline; vertical-align: top;" class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/3.jpg" height="95">
        <img style="display: inline; vertical-align: top;" class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/4.jpg" height="95">
        </div>
        <div style="position: absolute; left: 387px; white-space: nowrap; top: 2px;">
        <img style="display: inline; vertical-align: top;" class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/1.jpg" height="95">
        <img style="display: inline; vertical-align: top;" class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/2.jpg" height="95">
        <img style="display: inline; vertical-align: top;" class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/3.jpg" height="95">
        <img style="display: inline; vertical-align: top;" class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/4.jpg" height="95">
    	</div>
	</div>
</div>

Dann wenn ich das zweite mal was reinlade (und zwar in die class marquee0), dann überschreibe ich ja einige divs, und das sieht dann so aus:

HTML:
<div style="overflow: hidden;" class="marquee0">
	<img class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/1.jpg" height="95">
    <img class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/2.jpg" height="95">
    <img class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/3.jpg" height="95">
    <img class="thumb" src="http://www.tutorials.de/forum/javascript-ajax/.../thumbs/4.jpg" height="95">
</div>

Eigentlich kein Wunder dass dann nichts mehr geht.

Ich musste es jetzt mit $(".marquee0 > div > div") selektieren, und schon lädt es.

<edit>
Leider habe ich dennoch so komische Fehler, ich denke das liegt daran dass ich in den gleich initialisierten Crawler, immer verschiedenen Content rein gebe, und somit die Berechnungen die beim Init durchgeführt werden, nicht auf den neuen Content angepasst werden.

Jetzt würde ich also immer gerne den Crawler neu initialisieren. Also zuerst irgendwie löschen, und dann neu initialisieren oder so...

Hat da vielleicht noch jemand Ideen?
</edit>

lg Darian
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück