[FRAGE] Problem mit keydown Event!!!

cartel67 · 15. Sep. 2015

Hallo JS Community!

Ich habe ein Problem, den ich leider nicht lösen kann!
Ich habe eine Webseite erstellt mit einen Bildergallerie und benutze als CMS Typo3.
Die Gallerie funktioniert eigentlich bis auf das Problem, dass ich die Bilder nicht
mit den <- und -> wechseln kann.

Bei der Allgemeinenübersicht funktioniert das wechseln mit der <- und -> Tasenten.
Jedoch wenn ich nach einen bestimmten "Tag" bzw. "Produkten" sortieren lasse, dann
springt die Anzeige in 2er oder teilweise in 3er Schritten.

Ein Beispiel:

Ich habe 40 Bilder in der Gallerie drin. Klicke irgendeinen auf dem normalen Ansicht
drauf, dann kann ich die Bilder in 1er Schritten also 1,2,3,4,5...40 wechseln.
Sortiere ich es nach "Produkten" und findet z.B. 11 Ergebnisse dann sieht es
folgendermaßen aus: 1,3,5,7,9,11

Ich kann leider den fehler nicht in mein JS finden, vielleicht könnt ihr mir ja weiter
helfen =)

MFG
cartel67

Code:

(function ( $ ) {
	/**
	 * jQuery imageGallery Basic Plugin
	 *
	 * Add pagination support and add image uris via late binding
	 * Search functionality is not given in this plugin! This is solved via imageGallerySearch plugin below!
	 */
	$.fn.imageGallery = function() {
		var $plugin = this;
		
		$plugin.activePagePartial = "active";
		$plugin.inactivePagePartial = "hidden";
		$plugin.pageContainerQuery = ".tx_imagegallery_page.active";
		$plugin.findImageQuery = ".tx_imagegallery_image_thumbnail";
		$plugin.imageContainerQuery = ".tx_imagegallery_image";
		$plugin.findImageIdQuery = "#tx_imagegallery_image-";
		$plugin.paginationQuery = ".tx_imagegallery_iteratorpage";
		$plugin.paginationIteratorQuery = "#tx_imagegallery_iteratorage-";
		$plugin.pageFindQuery = "#tx_imagegallery_page-";
		$plugin.paginationTargetAttribute = "data-display";
		$plugin.urlSourceAttribute = "data-url";
		$plugin.urlDescriptionAttribute = "data-desc";
		$plugin.paginationContainer = ".tx_imagegallery_pagination";
		$plugin.fullsizeCurrentAttribute = "data-current";
		$plugin.fullsizeContainer = ".tx_imagegallery_fullsize_container";
		$plugin.fullsizeWrapper = ".tx_imagegallery_fullsize_wrapper";
		$plugin.fullsizeTitle = ".tx_imagegallery_fullsize_title";
		$plugin.fullsizeDescription = ".tx_imagegallery_fullsize_description";
		$plugin.fullsizeTags = ".tx_imagegallery_fullsize_tags";
		$plugin.fullsizeImage = ".tx_imagegallery_fullsize_image";
		$plugin.fullsizeLeft = ".tx_imagegallery_fullsize_left";
		$plugin.fullsizeRight = ".tx_imagegallery_fullsize_right";
		$plugin.fullsizeIdent = "full_size";
		$plugin.fullsizeDownload = ".tx_imagegallery_fullsize_download";
		$plugin.imageNameTag = ".tx_imagegallery_image_name";
		$plugin.cancelInput = false;
		
		$plugin.pagnationMaxPagesDisplay = 5;
		$plugin.activePage = 1;
		
		/**
		 * Refresh the active viewport of images and load the images if they are ot loaded yet.
		 */
		$plugin.refreshActiveView = function() {
			var pageContainer = $plugin.find($plugin.pageContainerQuery);
			var images = pageContainer.find($plugin.findImageQuery);
			
			images.each(function(index, e) {
				var image = $(e);
				image.attr("style", "background-image: url(" + image.attr($plugin.urlSourceAttribute) + ");"); // height: " + image.width() * 0.75 + "px;");
			});
		}
		
		$plugin.refreshPaginationView = function() {
			$plugin.find($plugin.paginationQuery).removeClass($plugin.activePagePartial);
			currentPage = $plugin.find($plugin.pageContainerQuery).attr("id").replace(/[^0-9]/g, '');
			$plugin.find($plugin.paginationQuery + "[" + $plugin.paginationTargetAttribute + "=" + currentPage + "]:not(#pagination_first, #pagination_last)").addClass("active");
			
			pages = $plugin.find($plugin.paginationQuery).length - 2;
			if (pages <= $plugin.pagnationMaxPagesDisplay)
				return;
			
			var leftAndRight = Math.floor($plugin.pagnationMaxPagesDisplay / 2);
			var startPage, endPage;
			
			if ($plugin.activePage <= (leftAndRight + 1)) {
				startPage = 1;
				endPage = $plugin.pagnationMaxPagesDisplay;
			} else if ($plugin.activePage >= (pages - leftAndRight)) {
				startPage = pages - $plugin.pagnationMaxPagesDisplay + 1;
				endPage = pages;
			} else {
				startPage = $plugin.activePage - leftAndRight;
				endPage = Number($plugin.activePage) + Number(leftAndRight);
			}
			
			$plugin.find($plugin.paginationQuery).hide();
			$plugin.find("#pagination_first, #pagination_last").show();
			for (i = startPage; i <= endPage; i++) {
				$plugin.find($plugin.paginationIteratorQuery + i).show();
			}
		}
		
		/* Initialize the pagination */
		
		var paginator = $plugin.find($plugin.paginationContainer);
		var firstPage = paginator.children().first();
		var lastPage = paginator.children().last();
		
		paginator.prepend(firstPage.clone().attr("id", "pagination_first").html("<<").hide());
		paginator.append(lastPage.clone().attr("id", "pagination_last").html(">>").hide());
		
		$plugin.find($plugin.paginationQuery).click(function() {
			var page = $(this);
			var pageId = page.attr($plugin.paginationTargetAttribute);
			
			$plugin.find($plugin.pageContainerQuery).removeClass($plugin.activePagePartial).addClass($plugin.inactivePagePartial);
			$plugin.find($plugin.pageFindQuery + pageId).removeClass($plugin.inactivePagePartial).addClass($plugin.activePagePartial);
			$plugin.activePage = pageId;
			$plugin.refreshPaginationView();
			
			$plugin.refreshActiveView();
		});
		
		/* Full view */
		
		$plugin.updateImageInfo = function(image, container) {
			var images = $plugin.find($plugin.findImageQuery).length;
			var index = $plugin.find($plugin.findImageQuery).index(image) + 1;
			
			var titleText = index + " / " + images + ": " + image.closest($plugin.imageContainerQuery).find($plugin.imageNameTag).html();
			var tags = image.closest($plugin.imageContainerQuery).find("[data=tags]").removeClass("hidden").attr("class").replace(/[0-9]\s/, '').split(" ");
			
			$plugin.find($plugin.findImageQuery).removeClass($plugin.fullsizeIdent);
			image.addClass($plugin.fullsizeIdent);
			
			container.find($plugin.fullsizeTags).empty();
			container.find($plugin.fullsizeTitle).html(titleText);
			container.find($plugin.fullsizeDescription).html(image.attr($plugin.urlDescriptionAttribute));
			container.find($plugin.fullsizeImage).attr("src", image.attr($plugin.urlSourceAttribute)).attr($plugin.fullsizeCurrentAttribute, image.closest($plugin.imageContainerQuery).attr("id").replace(/[0-9]\s/, ''));
			container.find($plugin.fullsizeDownload).attr("href", image.closest($plugin.imageContainerQuery).find("a.hidden").attr("href"));
			
			$.each(tags, function(i, tag) {
				container.find($plugin.fullsizeTags).append($("<span>" + tag + "</span>"));
			});
			
			container.find($plugin.fullsizeLeft).toggle(index > 1);
			container.find($plugin.fullsizeRight).toggle(index < images);
		};
		
		$plugin.switch = function(direction) {
			var currentImage = $plugin.find("." + $plugin.fullsizeIdent);
			var image = $plugin.find($plugin.findImageQuery)[$plugin.find($plugin.findImageQuery).index(currentImage) + (direction ? 1 : -1)];
			var container = $plugin.find($plugin.fullsizeContainer);
			$plugin.updateImageInfo($(image), container);
		};
		
		$($plugin.findImageQuery).click(function() {
			var image = $(this);
			var container = $plugin.find($plugin.fullsizeContainer);
			$plugin.updateImageInfo(image, container);
			
			container.fadeToggle( "slow", "linear" );
		});
		
		$($plugin.fullsizeContainer).click(function() {
			if ($plugin.cancelInput)
				$plugin.cancelInput = true;
			else
				$(this).fadeToggle( "slow", "linear" );
		});
		$($plugin.fullsizeLeft).click(function() {
			$plugin.switch(false);
			$plugin.cancelInput = true;
			
		});
		$($plugin.fullsizeRight).click(function() {
			$plugin.switch(true);
			$plugin.cancelInput = true;
		});
		$('body').keydown(function(e) {
			if ($($plugin.fullsizeContainer).is(":visible")) {
				if (e.keyCode == 37 && $plugin.find($plugin.fullsizeContainer).find($plugin.fullsizeLeft).is(":visible")) {
					/* LEFT */
					$plugin.switch(false);
				} else if (e.keyCode == 39 && $plugin.find($plugin.fullsizeContainer).find($plugin.fullsizeRight).is(":visible")) {
					/* RIGHT */
					$plugin.switch(true);
				}
			}
		});		
		$plugin.find($plugin.fullsizeDownload).click(function() {
			$(this).clone().click();
			$plugin.cancelInput = true;
		});
		
		$plugin.refreshActiveView();
		$plugin.refreshPaginationView();
		
		return this;
	};
	
	/**
	 * jQuery imageGallerySearch Plugin
	 *
	 * Add search support to image gallery
	 * For search results the imageGallery basic plugin will be appended for pagination- and zoom-support.
	 */
	$.fn.imageGallerySearch = function() {
		$plugin = this;
		
		$plugin.dropDownSelector = ".tx_imagegallery_tagfilter_input";
		$plugin.searchFieldSelector = ".tx_imagegallery_wordfilter_input";
		$plugin.sourceSelector = ".tx_imagegallery_container, .tx_imagegallery_pagination";
		$plugin.sourceImageSelector = ".tx_imagegallery_image ";
		$plugin.containerSelector = ".tx_imagegallery_maincontainer";
		$plugin.searchContainerClass = "tx_imagegallery_searchresult";
		$plugin.resetSearch = ".tx_imagegallery_resetsearch";
		$plugin.thumbnailSelector = ".tx_imagegallery_image_thumbnail";
		$plugin.descAttribute = "data-desc";
		$plugin.imageNameSelector = ".tx_imagegallery_image_name";
		$plugin.resetSelector = ".tx_imagegallery_resetsearch";
		
		$plugin.templates = {
			container: "<div class=\"tx_imagegallery_container searcher row\"></div>",
			page: "<div class=\"tx_imagegallery_page searcher {class}\" id=\"tx_imagegallery_page-{page_id}\"></div>",
			row: "<div class=\"tx_imagegallery_row searcher row-fluid\" id=\"tx_imagegallery_row-{row_id}\"></div>",
			paginatorContainer: "<div class=\"tx_imagegallery_pagination_wrapper\"></div>",
			paginator: "<div class=\"tx_imagegallery_pagination searcher\"></div>",
			paginatorPage: "<span class=\"tx_imagegallery_iteratorpage searcher\" id=\"tx_imagegallery_iteratorage-{page_i}\" data-display=\"{page_i}\">{page_i}</span>"
		};
		
		$controls = [$plugin.find($plugin.dropDownSelector), $plugin.find($plugin.searchFieldSelector)];
		
		$plugin.searchContainerQuery = "." + $plugin.searchContainerClass;
		//$($plugin.containerSelector).append($("<div class=\"" + $plugin.searchContainerClass + "\" style=\"display: none;\"></div>"));
		$plugin.append($("<div class=\"" + $plugin.searchContainerClass + "\" style=\"display: none;\"></div>"));
		
		$plugin.displaySource = function() {
			$plugin.find($plugin.sourceSelector).removeClass("hidden");
		}
		
		$plugin.hideSource = function() {
			$plugin.find($plugin.sourceSelector).addClass("hidden");
		}
		
		$plugin.resetSearch = function() {
			$plugin.find($plugin.resetSelector).hide();
			$plugin.find($plugin.searchContainerQuery).hide();
			$plugin.find($plugin.searchContainerQuery).empty();
		}
		
		$plugin.rebuildContainer = function(images) {
			this.pack = function(elements, packageSize) {
				var packages = [];
				var currentPackage = [];
				
				$.each(elements, function(i, element) {
					currentPackage.push(element);
					if (currentPackage.length === packageSize) {
						packages.push(currentPackage);
						currentPackage = [];
					}
				});
				
				if (currentPackage.length > 0)
					packages.push(currentPackage);
				
				return packages;
			};
			
			var tmp = $plugin.templates;
			var container = $(tmp.container);
			var paginationContainer = $(tmp.paginatorContainer);
			var paginator = $(tmp.paginator);
			
			var rows = this.pack(images, 3);
			var pages = this.pack(rows, 2);
			
			$.each(pages, function(page_id, page) {
				var pageContainer = $(tmp.page.replace("{class}", page_id === 0 ? "active" : "hidden").replace("{page_id}", page_id + 1));
				$.each(page, function(row_id, row) {
					var rowContainer = $(tmp.row.replace("{row_id}", row_id + 1));
					$.each(row, function(image_id, image) {
						rowContainer.append($(image));
					});
					pageContainer.append(rowContainer);
				});
				
				container.append(pageContainer);
			});
			
			if (pages.length > 1) {
				$.each(pages, function(page_id, page) {
					paginator.append($(tmp.paginatorPage.replace("{page_i}", page_id + 1).replace("{page_i}", page_id + 1).replace("{page_i}", page_id + 1)));
				});
			}
			
			paginationContainer.append(paginator);
			
			$plugin.find($plugin.resetSelector).show();
			$plugin.find($plugin.searchContainerQuery)
				.show()
				.append($($plugin.fullsizeContainer).clone())
				.append(container)
				.append(paginationContainer)
				.imageGallery();
		};
		
		$plugin.search = function() {
			$plugin.hideSource();
			
			var selectedTag = $controls[0].val().toLowerCase();
			var images = $plugin.find($plugin.sourceImageSelector).map(function() {
				this.isApply = function(tagString, tags) {
					if ($controls[1].val() === "")
						return true;
					
					var matches = [];
					$.each($controls[1].val().toLowerCase().replace(/[^a-z0-9\s]/gi, '').split(/\s+/), function(i, c) {
						matches.push($.inArray(c, tags) >= 0 || tagString.indexOf(c) >= 0);
					});
					
					return $.inArray(false, matches) < 0;
				};
				
				var e = $(this);
				var tagString = (e.find("[data=tags]").removeClass("hidden").attr("class") + " " + e.find($plugin.thumbnailSelector).attr($plugin.descAttribute) + " " + e.find($plugin.imageNameSelector).html()).toLowerCase().replace(/[^a-z0-9\s]/gi, '');
				var tags = tagString.split(/\s+/);
				
				if (selectedTag === "-1") {
					if (this.isApply(tagString, tags))
						return e.clone();
				} else {
					if ($.inArray(selectedTag, tags) >= 0 && this.isApply(tagString, tags))
						return e.clone();
				}
			});
			
			$plugin.rebuildContainer(images);
		}
		
		$plugin.updateSearch = function() {
			$plugin.resetSearch();
			if ($controls[0].val() !== "-1" || $controls[1].val() !== "")
				$plugin.search();
			else
				$plugin.displaySource();
		};
		
		/* Initialize the search */
		
		$controls[0].selectmenu({
			change: $plugin.updateSearch
		});
		
		$controls[0].bind("change", $plugin.updateSearch);
		$controls[1].bind("input", $plugin.updateSearch);
		$plugin.find($plugin.resetSelector).click(function() {
			$controls[0].val("-1");
			$controls[0].selectmenu('refresh', true);
			$controls[1].val("");
			$plugin.updateSearch();
		}).click();
		
		return this;
	}
}( jQuery ));

$(function() {
	$(".tx_imagegallery_maincontainer").imageGallery().imageGallerySearch();
});

mikdoe · 15. Sep. 2015

braucht man wirklich so monster viel code für die frage? häufig findet man ursachen, wenn man den code in ein fiddle reduziert.

cartel67 · 15. Sep. 2015

Ich habe bis heute fiddle nicht benutzt und weis gar nicht ob ich den Code da eingeben kann ohne das HTML Teil.
Wie gesagt ich arbeite mit TYPO3 und da muss man das "HTML Template" bearbeiten und mit selektoren für TYPO3
arbeiten. Naja, ich dachte vlt sieht ihr auf da Fehler die ich übersehe oder so, aber wie ich sehe das ist nicht der Fall.

Deswegen könnt ihr von mir aus mein Thema löschen!!! Ich werde dann alleine wieder zusehen müssen wie ich klar komme.

Gruß
cartel67

kkapsner · 16. Sep. 2015

Mit einem Beispiel, wo man sich das Problem live ansehen kann, ist es einfach viel einfacher, etwas zu deinem Code zu sagen. So ist der nur extrem lang und erschlägt einen erst einmal.

mikdoe · 16. Sep. 2015

cartel67 schrieb:
Deswegen könnt ihr von mir aus mein Thema löschen!!! Ich werde dann alleine wieder zusehen müssen wie ich klar komme.

Du brauchst nicht eingeschnappt sein. Ich habe lediglich gefragt. Und nur mal so generell auch für die Zukunft: wenn man im Netz kostenfreie Hilfe beziehen möchte muss man wenigstens ansatzweise mit machen. Man kann nicht einen Thread in die Welt setzen und nach 2 Stunden die Lösung abgreifen. Das funktioniert nicht. :kiwi-fruit:

Eine gut funktionierende Herangehensweise ist meiner Meinung nach die Verringerung des Codes auf das bestehende Problem. Hat man es dann am Wickel stellt man diesen minimierten Code in ein Fiddle ein und postet hier den Link. Ich gebe eine 99 %ige Garantie, dass man dazu spätestens am Folgetag ein hilfreiches Feedback bekommt. :greedy_dollars:

Den HTML Teil bekommst du übrigens mit einem Rechtsklick im Browser "Quelltext anzeigen".

[FRAGE] Problem mit keydown Event!!!

cartel67

New member

mikdoe

Moderator

cartel67

New member

kkapsner

Super Moderator

mikdoe

Moderator