✔ Bildgalerie mit Farbwechsel im Menü
- Themenstarter akdesign
- Beginndatum
Sempervivum
Erfahrenes Mitglied
Dann habe entweder ich etwas vergessen zu posten oder Du hast einen Fehler bei der Übernahme gemacht. Versuch mal, die Seite online zu bringen und poste die URL. Ich hatte eine Testseite gemacht und dort hat es funktioniert.
Sempervivum
Erfahrenes Mitglied
Du hast da eine ziemlich alte Version von jQuery mit der mein Zugriff auf das data-Attribut nicht funktioniert. Dieses sollte besser gehen:
Code:
// Create event listeners for .controls clicks
$('.control')
.bind('click', function () {
previousPosition = currentPosition;
// Determine new position
currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
var prevID = slides.eq(previousPosition).attr("data-menuitem");
if (prevID) $("#" + prevID).removeClass("active");
var currID = slides.eq(currentPosition).attr("data-menuitem");
if (currID) $("#" + currID).addClass("active");
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft': slideWidth * (-currentPosition)
});
});Jetzt muss ich doch nochmal kommen.
Soweit funktioniert alles.
Allerdings möchte ich die Menüpunkte noch verankern mit den entsprechenden Slides.
D.h. onClick Menüpunkt Broschüren, springt zu entsprechendem Slide - was auch funktioniert.
Allerdings soll bei Click auf nächsten Menüpunkt (hier Anzeigen) "active" von Broschüren wieder "normal" werden.
Dies habe ich so gelöst:
Soweit so gut, funktioniert auch.
Allerdings funktioniert - sobald ich dem Menüpunkt "Broschüren" die Klasse "normal" zuweise - die ganze Übung von davor nicht mehr:
Soweit funktioniert alles.
Allerdings möchte ich die Menüpunkte noch verankern mit den entsprechenden Slides.
D.h. onClick Menüpunkt Broschüren, springt zu entsprechendem Slide - was auch funktioniert.
Allerdings soll bei Click auf nächsten Menüpunkt (hier Anzeigen) "active" von Broschüren wieder "normal" werden.
Dies habe ich so gelöst:
Code:
// onClick auf Menüpunkt
function farbe () {
document.getElementById("menuitem2").style.color='#fff';
for(i=0;i<=document.getElementsByClassName("active").length;i++) {
document.getElementsByClassName("active")[i].style.color='#6b7b87';
}
}
function farbe1 () {
var hinweis = document.getElementById("menuitem1").style.color='#fff';
for(i=0;i<=document.getElementsByClassName("normal").length;i++) {
document.getElementsByClassName("normal")[i].style.color='#6b7b87';
}
}
HTML:
<nav2>
<ul>
<li><a id="menuitem1" class="active" href="#anzeigen" onClick="farbe1()">Anzeigen</a></li>
<li class="linie"> | </li>
<li><a id="menuitem2" href="#broschueren" onClick="farbe()" class="normal">Broschüren</a></li>
<li class="linie"> | </li>
<li><a id="menuitem3" href="#">Sales Support</a></li>
<li class="linie"> | </li>
<li><a id="menuitem4" href="#">Newsletter</a></li>
</ul>
</nav2>Soweit so gut, funktioniert auch.
Allerdings funktioniert - sobald ich dem Menüpunkt "Broschüren" die Klasse "normal" zuweise - die ganze Übung von davor nicht mehr:
Code:
// Create event listeners for .controls clicks
$('.control')
.bind('click', function () {
previousPosition = currentPosition;
// Determine new position
currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
var prevID = slides.eq(previousPosition).data("menuitem");
if (prevID) $("#" + prevID).removeClass("active");
var currID = slides.eq(currentPosition).data("menuitem");
if (currID) $("#" + currID).addClass("active");Sempervivum
Erfahrenes Mitglied
Verstehe ich mal wieder nicht so richtig:
Hast Du das selbst implementiert? Dann poste doch mal, wie Du es gemacht hast.
Generell würde ich empfehlen, bei dem bisherigen Verfahren zu bleiben und in Javascript die Klassen setzen und löschen und die Farben durch das CSS zu steuern.
Wieder mal, was für mich naheliegend wäre: Klick auf einen Menüpunkt soll das zugehörige Bild in derr Slideshow ansteuern und gleichzeitig die Farbe beim vorigen Menüpunkt zurück setzen und beim neuen setzen.
Code:
D.h. onClick Menüpunkt Broschüren, springt zu entsprechendem Slide - was auch funktioniert.Generell würde ich empfehlen, bei dem bisherigen Verfahren zu bleiben und in Javascript die Klassen setzen und löschen und die Farben durch das CSS zu steuern.
Wieder mal, was für mich naheliegend wäre: Klick auf einen Menüpunkt soll das zugehörige Bild in derr Slideshow ansteuern und gleichzeitig die Farbe beim vorigen Menüpunkt zurück setzen und beim neuen setzen.
Mittlerweile weiß ich, dass ich da sowieso einen Denkfehler drin habe, denn das wird nicht funktionieren mit der Art, wie ich es bisher gelöst hatte.
Yep, genau so sehe ich das mittlerweile auch, habe allerdings nur Lösungen für alte jQuery Versionen gefunden, die dann (jetzt, wo ich die neue installiert habe) nicht funktionieren.
Yep, genau so sehe ich das mittlerweile auch, habe allerdings nur Lösungen für alte jQuery Versionen gefunden, die dann (jetzt, wo ich die neue installiert habe) nicht funktionieren.
Sempervivum
Erfahrenes Mitglied
Inzwischen habe ich daran gearbeitet und festgestellt, dass Du Verweise auf Anker eingerichtet hattest. Das funktioniert so nicht, denn dabei wir die Buchführung der Slideshow mit currentPosition und den Pfeilen nicht aktualiert.
So funktioniert es bei mir jetzt:
So funktioniert es bei mir jetzt:
HTML:
<nav2>
<ul>
<li><a id="menuitem1" class="active" href="#">Anzeigen</a></li>
<li class="linie"> | </li>
<li><a id="text1">Broschüren</a></li>
<li class="linie"> | </li>
<li><a id="menuitem3">Sales Support</a></li>
<li class="linie"> | </li>
<li><a href="#">Newsletter</a></li>
</ul>
</nav2>
Code:
<script type="text/javascript">
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 1050;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slideContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float': 'left',
'width': slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function () {
// Determine new position
var newPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
gotoSlide(newPosition);
});
$("nav2 li a").each(function (idx) {
$(this).bind("click", function () {
gotoSlide(idx);
})
});
function gotoSlide(newPosition) {
var previousPosition = currentPosition;
currentPosition = newPosition;
var prevID = slides.eq(previousPosition).attr("data-menuitem");
if (prevID) $("#" + prevID).removeClass("active");
var currID = slides.eq(currentPosition).attr("data-menuitem");
if (currID) $("#" + currID).addClass("active");
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'margin-left': slideWidth * (-currentPosition)
});
}
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position) {
// Hide left arrow if position is first slide
if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() }
// Hide right arrow if position is last slide
if (position == numberOfSlides - 1) { $('#rightControl').hide() } else { $('#rightControl').show() }
}
});
</script>Hmmm……… ok. Leider stimmen die "Anker" nicht.
Die Navi
Und die Slidshow:
Code:
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 1050;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slideContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function () {
// Determine new position
var newPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
gotoSlide(newPosition);
});
$("nav2 li a").each(function (idx) {
$(this).bind("click", function () {
gotoSlide(idx);
})
});
function gotoSlide(newPosition) {
var previousPosition = currentPosition;
currentPosition = newPosition;
var prevID = slides.eq(previousPosition).attr("data-menuitem");
if (prevID) $("#" + prevID).removeClass("active");
var currID = slides.eq(currentPosition).attr("data-menuitem");
if (currID) $("#" + currID).addClass("active");
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft': slideWidth * (-currentPosition)
});
}
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>Die Navi
HTML:
<nav2>
<ul>
<li><a id="menuitem1" class="active" href="#">Anzeigen</a></li>
<li class="linie"> | </li>
<li><a id="menuitem2" href="#">Broschüren</a></li>
<li class="linie"> | </li>
<li><a id="menuitem3" href="#ss">Sales Support</a></li>
<li class="linie"> | </li>
<li><a id="menuitem4" href="#" >Newsletter</a></li>
</ul>
</nav2>Und die Slidshow:
HTML:
<div id="galerie">
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slideContainer">
<div class="slide" data-menuitem="menuitem1">
<img src="images/slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
<img src="images/slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 300px; margin-top: 125px;"/>
<figcaption><span class="linie_fig">|</span> <strong>Luisina</strong><br>Diese Kampagne für den führenden französischen Spezialisten im Bereich Arbeitsplatten und Spülen ist in Wohn- und Frauenzeitschriften geschaltet worden. Markante Gestaltung und High-End-Positionierung stehen im Vordergrund: Für die Premium-Marke Luisina, die sich noch im Aufbau befindet, stehen Sichtbarkeit und Image im Vordergrund.</figcaption>
</div>
<div class="slide" data-menuitem="menuitem1">
<img src="images/slidebilder/groupama.jpg" width="215" height="280" border="0" style="margin-left: 500px;" />
<figcaption>
<span class="linie_fig">|</span> <strong>Groupama</strong><br>
Die französische Groupama gehört europaweit zu den großen international tätigen Versicherungs­gesellschaften. Eine Teilbelegung im Stern hat den Auftakt zum Aufbau ihrer Deutschland-Präsenz gegeben.
</figcaption>
</div>
<div class="slide" data-menuitem="menuitem1">
<img src="images/slidebilder/lafayette.jpg" width="117" height="350" border="0" style="margin-left: 600px;" />
<figcaption>
<span class="linie_fig">|</span> <strong>Galeries Lafayette</strong><br>
Für den Straßburger Standort der Galeries Lafayette stellt die deutsche Kundschaft eine sehr attraktive Premium-Zielgruppe dar. Sie wird über spezifische Anzeigen und In-House-Aktionen angesprochen, <br>die den Pariser Luxus-Flair der Warenhauskette konsequent transportieren.
</figcaption>
</div>
<div class="slide" data-menuitem="menuitem2">
<img src="images/slidebilder/president_rezeptheft.png" width="331" height="242" border="0" style="margin-left: 30px;" />
<figcaption>
<span class="linie_fig">|</span> <strong>Rezeptheft Président</strong><br>
Dauer-Sichtbarkeit im unmittelbaren Anwendungs­umfeld: ein einleuchtendes Ziel, das vom Crème Fraîche-Rezeptheft konsequent umgesetzt wird. Raffinierte Rezepte unterstreichen die Gourmet-Positionierung, folienkaschiertes, wischfestes Papier sorgt für Lebensdauer im gnadenlosen Küchenbiotop.
</figcaption>
</div>
<div class="slide" data-menuitem="menuitem2">
<img src="images/slidebilder/sto.png" width="419" height="324" border="0" style="margin-left: 30px;" />
<figcaption>
<span class="linie_fig">|</span> <strong>Sto Broschüre</strong><br>
Für die französische Tochter von Sto <br>–dem weltweiten Marktführer bei Fassadendämmsystemen – sollten <br>Anwendungen und Service-Leistungen aus landespezifischer Perspektive <br>dar­ge­stellt werden. Das 50-seitige Ergebnis trifft den Nerv sowohl bodenständiger Handwerker als auch anspruchsvoller Architekten.
</figcaption>
</div>
<div class="slide" data-menuitem="menuitem3">
<img src="images/slidebilder/ates.png" width="470" height="320" border="0" style="margin-left: 350px;" />
<figcaption>
<span class="linie_fig">|</span> <strong>ATES, Architektenordner</strong><br>
Als Meinungsbildner mit besonders hohem Anspruch sind Architekten im Objektbereich ebenso gefürchtet wie unumgänglich. Der ATES-Ordner bringt die geballte Kompetenz der französischen Nr.1 für Sonnenschutz auf den Punkt – und ist zugleich ein sehr durchdachtes Planungswerkeug.
</figcaption>
</div>
<div class="slide" data-menuitem="menuitem3">
<img src="images/slidebilder/mailing_sito_1.png" width="280" height="220" border="0" style="margin-left: 20px; margin-top: 70px;" />
<img src="images/slidebilder/mailing_sito_2.png" width="360" height="320" border="0" style="margin-left: 300px;" />
<figcaption>
<span class="linie_fig">|</span> <strong>Wilkhahn, Kick-off-Mailing Sito</strong><br>
Um vielbeschäftigte Fachhändler und leicht blasierte Innenarchitekten aus der Reserve zu locken veranstaltete Wilkhahn zur Einführung der Sessel­reihe Sito eine aufwendige Präsen­ta­tion in Paris. Das Mailing verbindet Druck auf Transparentpapier, origi­nelle Verarbeitung und elegantes Give-Away in Form eines Brieföffners aus lasergraviertem Edelstahl.
</figcaption>
</div>
<div class="slide" data-menuitem="menuitem4">
<img src="images/slidebilder/novartis.jpg" width="217" height="307" border="0" style="margin-left: 600px;" />
<figcaption>
<span class="linie_fig">|</span> <strong>Novartis BPO</strong><br>
Als 'Global Player' hat Novartis Biopharmaceutical Operations (BPO) Produktionsstandorte in ver­schiedenen Teilen der Welt. Das entwickelte Bau­kasten­konzept entspricht genau dem Corporate Design, basiert aber zugleich auf selbstverwaltetem Content Management: Die fortlaufenden Ausgaben werden intern generiert und über das Intranet welt­weit verteilt.
</figcaption>
</div>
<div class="slide" data-menuitem="menuitem4">
<img src="images/slidebilder/toupret.png" width="310" height="290" border="0" style="margin-left: 50px;" />
<figcaption>
<span class="linie_fig">|</span> <strong>Toupret</strong><br>
Fast jeder der 16.000 französischen Malermeister setzt Spachtelmassen und Deko-Produkte von Toupret ein – und kennt dennoch das Sortiment meistens nur oberflächlich. Bei einem Vertrieb <br>über Großhändler und angesichts der noch <br>starken Internet-Resistenz des Handwerks <br>bleiben Newsletters in gedruckter Form die effektivste Form der Informationsvermittlung.
</figcaption>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>