php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 31.05.2011, 21:57  
Neuer Benutzer
 
Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse:
Anfänger
tooken befindet sich auf einem aufstrebenden Ast
Standard Slideshow und document write Probelm

Hey,

ich habe ein problem mit einer Slideshow. Die Slideshow hat ein großes Bild und unten drunter sind 4 Thumbnails ... klickt man auf ein Thumbnail ändert sich das große Bild.

Nun möchte ich auch bei einem klick auf ein Thumbnail einen anderen Text anzeigen ... also Bild 1 = Text 1 , Bild 2 = Text 2 usw.

Hier mal der Javascript Code

Code:
	<script type="text/javascript">
		jQuery.PictureSlides.set({
			// Switches to decide what features to use
			useFadingIn : true,
			useFadingOut : true,
			useFadeWhenNotSlideshow : true,
			useFadeForSlideshow : true,
			useDimBackgroundForSlideshow : true,
			loopSlideshow : false,
			usePreloading : true,
			useAltAsTooltip : true,
			useTextAsTooltip : true,
			
			// Fading settings
			fadeTime : 500, // Milliseconds	
			timeForSlideInSlideshow : 2000, // Milliseconds

			// At page load
			startIndex : 1,	
			startSlideShowFromBeginning : true,
			startSlideshowAtLoad : false,
			dimBackgroundAtLoad : false,

			
			// Large images to use and thumbnail settings
			images : [
				{
					image : "fileadmin/templates/index_01_FILES/slide/pictures/1.jpg", 
					alt : "Picture 1",
					text : "Text 1"
				},
	
				{                                  
					
					image : "fileadmin/templates/index_01_FILES/slide/pictures/3.jpg", 
					alt : "Picture 3",
					text : "Text 2",
					url : ""
				},
				{                                  
					
					image : "fileadmin/templates/index_01_FILES/slide/pictures/4.jpg", 
					alt : "Picture 4",
					text : "Text 3",
					url : ""
				},
				{                                  
					
					image : "fileadmin/templates/index_01_FILES/slide/pictures/5.jpg", 
					alt : "Picture 5",
					text : "Text 4"
				},
	
			],
			thumbnailActivationEvent : "click",

			// Classes of HTML elements to use
			mainImageClass : "picture-slides-image", // Mandatory
			mainImageFailedToLoadClass : "picture-slides-image-load-fail",
			imageLinkClass : "picture-slides-image-link",
			fadeContainerClass : "picture-slides-fade-container",
			imageTextContainerClass : "picture-slides-image-text",
			previousLinkClass : "picture-slides-previous-image",
			nextLinkClass : "picture-slides-next-image",
			imageCounterClass : "picture-slides-image-counter",
			startSlideShowClass : "picture-slides-start-slideshow",
			stopSlideShowClass : "picture-slides-stop-slideshow",
			thumbnailContainerClass: "picture-slides-thumbnails",
			dimBackgroundOverlayClass : "picture-slides-dim-overlay"
		});
	</script>
Ich habe oben mal als Beispiel in text Text 1 usw eingefügt. Das funktioniert auch Perfekt nur leider soll der Text der dort rein muss auch mit HTML ELementen sein also zum Beispiel ein h3 oder ein div ... er schreibt das aber mit aus also er gibt das html mit als Text aus.

Nun habe ich es mit document.write Probiert:

Code:
images : [
				{
					image : "fileadmin/templates/index_01_FILES/slide/pictures/1.jpg", 
					alt : "Picture 1",
					text : document.write('<h3>Text 1</h3>')
				},
	
				{                                  
					
					image : "fileadmin/templates/index_01_FILES/slide/pictures/3.jpg", 
					alt : "Picture 3",
					text : "",
					url : ""
				},
				{                                  
					
					image : "fileadmin/templates/index_01_FILES/slide/pictures/4.jpg", 
					alt : "Picture 4",
					text : document.write('<h3>Text 2</h3>'),
					url : ""
				},
......
Aber dann gibt er sofort alle beiden texte aus ohne das man auf das Thumbnail geklickt hat.

Was mache ich Falsch

Ich Danke euch im vorraus für eure Hilfe.
tooken ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 31.05.2011, 23:02  
Neuer Benutzer
 
Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse:
Anfänger
tooken befindet sich auf einem aufstrebenden Ast
Standard

Nachtrag ich habe nun gesehen das HTML Elemente wie z.B. ein einfache < b > als &lt; b &gt; ausgegeben wird weshalb ich eben nicht einfach in text : "" html schreiben kann. Was kann ich machen das dies nicht mehr passiert?
tooken ist offline   Mit Zitat antworten
Alt 31.05.2011, 23:06  
Moderator¹
 
Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse:
Fortgeschritten
ChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer Anblick
Standard

Dazu wirst du das Plugin an der Stelle anpassen müssen, an der es diese Texte ausgibt - so, dass es sie eben nicht als reinen Textinhalt ausgibt, sondern in einen HTML-Kontext bringt. (Sofern es dafür keine Option o.ä. gibt, mit der man das bereits beeinflussen kann.)
__________________
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
ChrisB ist offline   Mit Zitat antworten
Alt 31.05.2011, 23:11  
Neuer Benutzer
 
Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse:
Anfänger
tooken befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für deine schnelle Antwort. Es werden zwei js Dateien benutzen zum einen die PictureSlides-jquery-2.0.js

Code:
/*global jQuery, $ */
/*
	jQuery.PictureSlides is developed by Robert Nyman, http://www.robertnyman.com
	For more information, please see http://www.robertnyman.com/picture-slides
	Released under a MIT License
*/
jQuery.PictureSlides = function () {
	var useMSFilter = false,
		slideshows = [],
		set = function (settings) {
			slideshows.push(settings);
		},
		
		init = function () {
			var counter = 0;
			$(".picture-slides-container").each(function () {
				var elm = $(this),
					
					// Element references
					settings = slideshows[counter++],
					mainImage = elm.find("." + settings.mainImageClass),
					mainImageFailedToLoad = elm.find("." + settings.mainImageFailedToLoadClass),
					imageLink = elm.find("." + settings.imageLinkClass),
					fadeContainer = elm.find("." + settings.fadeContainerClass),
					imageTextContainer = elm.find("." + settings.imageTextContainerClass),
					previousLink = elm.find("." + settings.previousLinkClass),
					nextLink = elm.find("." + settings.nextLinkClass),
					imageCounter = elm.find("." + settings.imageCounterClass),
					startSlideShowLink = elm.find("." + settings.startSlideShowClass),
					stopSlideShowLink = elm.find("." + settings.stopSlideShowClass),
					thumbnailContainer = elm.find("." + settings.thumbnailContainerClass),
					thumbnailEvent = settings.thumbnailActivationEvent,
					thumbnailLinks,
					dimBackgroundOverlay = $("." + settings.dimBackgroundOverlayClass),
					
					// General image settings
					usePreloading = settings.usePreloading,
					useAltAsTooltip = settings.useAltAsTooltip,
					useTextAsTooltip = settings.useTextAsTooltip,
					images = settings.images,
					startIndex = (settings.startIndex > 0)? (settings.startIndex - 1) : settings.startIndex,
					imageIndex = startIndex,
					currentImageIndex = imageIndex,
					startSlideShowFromBeginning = settings.startSlideShowFromBeginning,
					dimBackgroundAtLoad = settings.dimBackgroundAtLoad,
					
					// General fade settings
					useFadingIn = settings.useFadingIn,
					useFadingOut = settings.useFadingOut,
					useFadeWhenNotSlideshow = settings.useFadeWhenNotSlideshow,
					useFadeForSlideshow = settings.useFadeForSlideshow,
					useDimBackgroundForSlideshow = settings.useDimBackgroundForSlideshow,
					loopSlideshow = settings.loopSlideshow,
					fadeTime = settings.fadeTime,
					timeForSlideInSlideshow = settings.timeForSlideInSlideshow,
					startSlideshowAtLoad = settings.startSlideshowAtLoad,
					slideshowPlaying = false,
					timer,
					
					// Sets main image
					setImage = function () {
						// Set main image values
						var imageItem = images[imageIndex];
						mainImage.attr({
							src : imageItem.image,
							alt : imageItem.alt
						});
						
						// If the alt text should be used as the tooltip
						if (useAltAsTooltip) {
							mainImage.attr("title", imageItem.alt);
						}
						
						// If the image text should be used as the tooltip
						if (useTextAsTooltip) {
							mainImage.attr("title", imageItem.text);
						}
						
						// Set image text
						if (imageTextContainer.length > 0) {
							imageTextContainer.text(imageItem.text);
						}
						
						// Set image link
						if (imageLink.length > 0) {
							var url = imageItem.url;
							if (typeof url !== "undefined" && url.length > 0) {
								imageLink.attr("href", imageItem.url);
							}
							else {
								imageLink.removeAttr("href");
							}	
						}
						
						// Set image counter values
						if (imageCounter.length > 0) {
							imageCounter.text((imageIndex + 1) + "/" + (images.length));
						}
						
						if (!loopSlideshow) {
							// Enabling/disabling previous link
							if (imageIndex === 0) {
								previousLink.addClass("picture-slides-disabled");
							}
							else {
								previousLink.removeClass("picture-slides-disabled");
							}
						
							// Enabling/disabling next link
							if (imageIndex === (images.length - 1)) {
								nextLink.addClass("picture-slides-disabled");
							}
							else {
								nextLink.removeClass("picture-slides-disabled");
							}
						}
						
						// Keeping a reference to the current image index
						currentImageIndex = imageIndex;
						
						// Adding/removing classes from thumbnail
						if (thumbnailContainer[0]) {							
							thumbnailLinks.removeClass("picture-slides-selected-thumbnail");
							$(thumbnailLinks[imageIndex]).addClass("picture-slides-selected-thumbnail");
						}
					},
					
					// Navigate to previous image
					prev = function () {
						if (imageIndex > 0 || loopSlideshow) {
							if (imageIndex === 0) {
								imageIndex = (images.length -1);
							}
							else {
								imageIndex = --imageIndex;
							}
							if (useFadingOut && (useFadeWhenNotSlideshow || slideshowPlaying) && imageIndex !== currentImageIndex) {
								fadeContainer.stop();
								fadeContainer.fadeTo(fadeTime, 0, function () {
									setImage(imageIndex);									
								});	
							}
							else {
								if (useFadingIn && imageIndex !== currentImageIndex) {
									fadeContainer.css("opacity", "0");
								}
								setImage(imageIndex);
							}
						}
					},
					
					// Navigate to next image
					next = function (specifiedIndex) {
						if (imageIndex < (images.length -1) || typeof specifiedIndex !== "undefined" || loopSlideshow) {
							if (typeof specifiedIndex !== "undefined") {
								imageIndex = specifiedIndex;
							}
							else if (imageIndex === (images.length-1)) {
								imageIndex = 0;
							}
							else {
								imageIndex = ++imageIndex;
							}
							if (useFadingOut && (useFadeWhenNotSlideshow || slideshowPlaying) && imageIndex !== currentImageIndex) {
								fadeContainer.stop();
								fadeContainer.fadeTo(fadeTime, 0, function () {
									setImage(imageIndex);									
								});
							}
							else {
								if (useFadingIn && imageIndex !== currentImageIndex) {
									fadeContainer.css("opacity", "0");
								}	
								setImage(imageIndex);
							}
						}
						else {
							stopSlideshow();
						}
					},
					
					// Start slideshow
					startSlideshow = function () {
						slideshowPlaying = true;
						startSlideShowLink.hide();
						stopSlideShowLink.show();
						if (startSlideShowFromBeginning) {
							next(0);
						}
						clearTimeout(timer);
						timer = setTimeout(function () {
							next();
						}, timeForSlideInSlideshow);
						if (useDimBackgroundForSlideshow && dimBackgroundOverlay[0]) {
							elm.addClass("picture-slides-dimmed-background");
							dimBackgroundOverlay.show();
						}
					},
					
					// Stop slideshow
					stopSlideshow = function () {
						clearTimeout(timer);
						slideshowPlaying = false;
						startSlideShowLink.show();
						stopSlideShowLink.hide();
						if (useDimBackgroundForSlideshow && dimBackgroundOverlay[0]) {
							elm.removeClass("picture-slides-dimmed-background");
							dimBackgroundOverlay.hide();
						}
					};

				// Fade in/show image when it has loaded
				mainImage[0].onload = function () {
					if (useFadingIn && (useFadeWhenNotSlideshow || slideshowPlaying)) {
						fadeContainer.fadeTo(fadeTime, 1, function () {
							if (slideshowPlaying) {
								clearTimeout(timer);
								timer = setTimeout(function () {
									next();
								}, timeForSlideInSlideshow);
							}
						});
					}
					else {
						fadeContainer.css("opacity", "1");
						fadeContainer.show();
						if (slideshowPlaying) {
							clearTimeout(timer);
							timer = setTimeout(function () {
								next();
							}, timeForSlideInSlideshow);
						}
					}
					mainImageFailedToLoad.hide();
				};
				
				mainImage[0].onerror = function () {
					fadeContainer.css("opacity", "1");
					mainImageFailedToLoad.show();
					if (slideshowPlaying) {
						clearTimeout(timer);
						timer = setTimeout(function () {
							next();
						}, timeForSlideInSlideshow);
					}
				};
										
				// Previous image click
				previousLink.click(function (evt) {
					prev();
					return false;
				});
				
				// Next image click
				nextLink.click(function (evt) {
					next();
					return false;
				});
				
				// Start slideshow click
				startSlideShowLink.click(function () {
					startSlideshow();
					return false;
				});
				
				// Stop slideshow click
				stopSlideShowLink.click(function () {
					stopSlideshow();
					return false;
				});
				
				// Shows navigation links and image counter
				previousLink.show();
				nextLink.show();
				startSlideShowLink.show();
				imageCounter.show();
				
				// Stop slideshow click
				stopSlideShowLink.click(function () {
					stopSlideshow();
				});
				
				// Thumbnail references
				if (thumbnailContainer[0]) {
					thumbnailLinks = $(thumbnailContainer).find("a");
					$(thumbnailLinks[imageIndex]).addClass("picture-slides-selected-thumbnail");
					for (var i=0, il=thumbnailLinks.length, thumbnailLink; i<il; i++) {
						thumbnailLink = $(thumbnailLinks[i]);
						thumbnailLink.data("linkIndex", i);
						thumbnailLink.bind(thumbnailEvent, function (evt) {
							next($(this).data("linkIndex"));
							this.blur();
							return false;
						});
					}
				}
				
				// Sets initial image
				setImage();
				
				// If play slideshow at load
				if (startSlideshowAtLoad) {
					startSlideshow();
				}
				
				if (dimBackgroundAtLoad) {
					elm.addClass("picture-slides-dimmed-background");
					dimBackgroundOverlay.show();
				}
				
				if (usePreloading) {
					var imagePreLoadingContainer = $("<div />").appendTo(document.body).css("display", "none");
					for (var j=0, jl=images.length, image; j<jl; j++) {
						$('<img src="' + images[j].image + '" alt="" />').appendTo(imagePreLoadingContainer);
					}
				}
			});
		};
	return {
		set : set,
		init : init
	};
}();
$(document).ready(function () {
	jQuery.PictureSlides.init();
});
Und jquery.min.js ... ich habe leider von Javascript nicht wirklich viel Ahnung kannst du mir Helfen
tooken ist offline   Mit Zitat antworten
Alt 31.05.2011, 23:16  
Neuer Benutzer
 
Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse:
Anfänger
tooken befindet sich auf einem aufstrebenden Ast
Standard

Ich hab mal in die jquery.min geschaut und folgendes gefunde:

Code:
o.inArray(this.text,N)>=0)});if(!N.length){this.selectedIndex=-1}}else{this.value=K}}})},html:function(E){return E===g?(this[0]?this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g,""):null):this.empty().append(E)},replaceWith:function(E){return this.after(E).remove()},eq:function(E){return this.slice(E,+E+1)},slice:function(){return this.pushStack(Array.prototype.slice.apply
Ist das die stelle die du meinst?
tooken ist offline   Mit Zitat antworten
Alt 31.05.2011, 23:35  
Moderator¹
 
Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse:
Fortgeschritten
ChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer Anblick
Standard

Nein, in den Sourcen von jQuery selber solltest du tunlichst nicht herumpfuschen ... ich meine im Code des Plugins.
__________________
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
ChrisB ist offline   Mit Zitat antworten
Alt 31.05.2011, 23:39  
Moderator
 
Benutzerbild von Chriz
 
Registriert seit: 11.05.2008
Beiträge: 6.266
Chriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer Anblick
Standard

Code:
// Set image text
if (imageTextContainer.length > 0) {
	imageTextContainer.text(imageItem.text);
}
Ersetz die mittlere Zeile mal durch imageTextContainer.html(imageItem.text);
__________________
"Nuschel ich?" - "Was?"
Chriz ist offline   Mit Zitat antworten
Alt 31.05.2011, 23:46  
Neuer Benutzer
 
Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse:
Anfänger
tooken befindet sich auf einem aufstrebenden Ast
Standard

Ich habe die Zeile ausgetauscht leider ohne Erfolg nun geht die Slideshow auch nicht mehr es werden nun die Bilder in voller größe auf der Seite angezeigt wenn man rauf klickt
tooken ist offline   Mit Zitat antworten
Alt 31.05.2011, 23:47  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Bitte Javascript-Konsole benutzen!
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 31.05.2011, 23:48  
Neuer Benutzer
 
Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse:
Anfänger
tooken befindet sich auf einem aufstrebenden Ast
Standard

Es geht vielen DANK Chriz ich hatte mich nur verschrieben AHH nun geht es

DANKE!!!
tooken ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
HTML-String auslesen bit4fox PHP Einsteiger 10 08.01.2011 16:33
Dynamische slideshow php Daani PHP Tipps 2010 10 02.09.2010 21:30
Link auf Dateien außerhalb des Document Root michael2105 PHP-Fortgeschrittene 9 24.04.2010 22:07
URL von Applet in Frame anzeigen pfu PHP Tipps 2010 5 22.02.2010 13:54
Slideshow mit Anzeige durch einem Textlink Bloedlah PHP Tipps 2009 4 23.08.2009 23:17
problem bei Slideshow HTML, Usability und Barrierefreiheit 1 20.10.2004 23:59

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
slideshow für anfänger, document.write(images[index]);, diashow mit document.write, thumbnail ändert großes bild javascript, thumbnail klick großes bild und text, html-diaschau bzw. index erstellen mit imageindex, slideshow mit php, javascript slide document.write, php slideshow mit thumbnails script, diashow mit thumbnails php, pictureslides settings is undefined, slideshow mit linkfunktion, slideshow mit link funktion, php slide von text, javascript document.write image, forum alle slideshows mit thumbnails

Alle Zeitangaben in WEZ +2. Es ist jetzt 11:08 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum