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 01.06.2011, 00:35  
Neuer Benutzer
 
Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse:
Anfänger
tooken befindet sich auf einem aufstrebenden Ast
Standard

Eine Frage habe ich noch ... wenn ich jetzt z.B. eine breite definieren möchte mit

Code:
text : "<table><tr><td width="320">test</td></tr></table>",
dann geht das ja nicht. Ich habe es also mit width=\"320\" gemacht aber das geht auch nicht. Wie muss es richtig lauten?
tooken ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

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

Alt 01.06.2011, 02:26  
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

Benutze bitte Stylesheets für sowas. Ansonsten halt die anderen Hochkommata.
__________________
--
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 01.06.2011, 10:35  
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

Zitat:
Zitat von nikosch Beitrag anzeigen
Benutze bitte Stylesheets für sowas. Ansonsten halt die anderen Hochkommata.
Genau, und zwar scheinbar diese hier: picture-slides-image-text

Installier dir mal Firebug (im Firefox) oder benutz die Chrome Konsole, da kannst du dann sehen, welche Klasse oder welche Styles ein HTML-Element hat und entsprechend mit z.B. der Breite herumexperimentieren.
__________________
"Nuschel ich?" - "Was?"
Chriz ist offline   Mit Zitat antworten
Alt 04.06.2011, 20:32  
Neuer Benutzer
 
Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse:
Anfänger
tooken befindet sich auf einem aufstrebenden Ast
Standard

Erstmal vielen vielen Dank für eure Hilfe ich habe bis jetzt alles umgesetzt bekommen. Nun habe ich noch ein letztes Problem ... ich habe 5 Bilder in der Slideshow und ich möchte in dem Javascript das erste und das letzte angezeigte Bild eine anderes CSS geben (das erste und das letzte angezeigt Bild soll runde ecken bekommen). Die Slideshow ist im Moment so eingestellt das es 4 Bilder anzeigt und sobald man auf eines der 4 klickt zeigt er das in groß an und das fünfte erscheint.

CSS

Code:
/* General */
#container{
	background: #fff;
	overflow: hidden;
	width: 652px;
	height: 445px;

}

.navigation-controls {
	position: relative;
	text-align: center;
	background: #fff;
	padding: 0px;
	z-index: 1001;
}

/* Picture slides */
.picture-slides-disabled {
	color: #eee;
}

.picture-slides-container {
	margin-bottom: 2em;
}

.picture-slides-dimmed-background .navigation-controls {
	-moz-border-radius : 0 0 5px 5px;
	-webkit-border-top-left-radius : 0;
	-webkit-border-top-right-radius : 0;
	-webkit-border-bottom-left-radius : 5px;
	-webkit-border-bottom-right-radius : 5px;
}

.picture-slides-dimmed-background .picture-slides-image-text {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-top-left-radius : 5px;
	-webkit-border-top-right-radius : 5px;
	-webkit-border-bottom-left-radius : 0;
	-webkit-border-bottom-right-radius : 0;
    
}

.picture-slides-fade-container {
	position: relative;
	overflow: hidden;
	z-index: 1002;
}

.picture-slides-fade-container a {
	display: block;
	height: 320px;
	text-align: center;
	margin-bottom: 0px;
}

.picture-slides-fade-container a img {
	/*
	-moz-box-shadow: 5px 5px 10px #000;
	-webkit-box-shadow: 5px 5px 10px #000;
	*/
}

.picture-slides-image-load-fail {
	display: none;
}

.picture-slides-image-text {
	position: relative;
	background: #fff;
	text-align: center;
	padding: 0px 0 0px;
	z-index: 1001;
}

.picture-slides-previous-image, 
.picture-slides-next-image, 
.picture-slides-start-slideshow, 
.picture-slides-stop-slideshow {
	display: none;
}

.picture-slides-previous-image, 
.picture-slides-next-image, 
.picture-slides-start-slideshow, 
.picture-slides-stop-slideshow {
	cursor: pointer;
}

.picture-slides-thumbnails {
	list-style: none;
	margin-top: 1em;

	margin-left:-40px;
	margin-top:10px;

	width:770px
}

.picture-slides-thumbnails li {
	float: left;
	/* width: 166px; */
    
}

.picture-slides-thumbnails li img {
	width: 154px;
	padding-right:12px;
}

.rund {

}
.rund1 {
    -moz-border-radius :0 0 0 10px;
    -webkit-border-bottom-left-radius : 10px;
}
.rund2 {
    -moz-border-radius :0 0 10px 0;
    -webkit-border-bottom-right-radius : 10px;
}

.picture-slides-thumbnails a {
	outline: none;
}

.picture-slides-thumbnails li .picture-slides-selected-thumbnail img {
    margin-left: -155px;
	padding: 0px;
	background: #ea9d80;
	border: 0px solid #000;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
    visibility:hidden;
}



.picture-slides-dim-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	z-index: 1000;
	display: none;
    -moz-border-radius :0 0 10px 0;
    -webkit-border-bottom-right-radius : 10px;
}
Javascript

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.html(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();
});
Ich danke euch vielmals für eure Hilfe.

LG
tooken ist offline   Mit Zitat antworten
Alt 06.06.2011, 21:16  
Erfahrener Benutzer
 
Benutzerbild von lstegelitz
 
Registriert seit: 07.09.2009
Beiträge: 4.005
PHP-Kenntnisse:
Fortgeschritten
lstegelitz ist einfach richtig nettlstegelitz ist einfach richtig nettlstegelitz ist einfach richtig nettlstegelitz ist einfach richtig nett
Standard

Zitat:
Zitat von tooken Beitrag anzeigen
das erste und das letzte angezeigte Bild eine anderes CSS geben
Na mach doch... 2 neue Classes anlegen und den entsprechenden Bildern zuweisen. Oder was meintest du?
__________________
Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.
lstegelitz 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
slides php

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