| | | | |
| |||||||
| JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene |
|
| | LinkBack | Themen-Optionen | Thema bewerten |
| | |
| PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten | |
| | |
| Neuer Benutzer Registriert seit: 08.10.2009
Beiträge: 21
PHP-Kenntnisse: Anfänger ![]() | 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;
}
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();
});
LG |
| | |
| | |
| Erfahrener Benutzer Registriert seit: 07.09.2009
Beiträge: 4.005
PHP-Kenntnisse: Fortgeschritten ![]() ![]() ![]() ![]() | 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. |
| | |
|
| Themen-Optionen | |
| Thema bewerten | |
|
|
Ä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 |