 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Bijou
Threadersteller
Dabei seit: 26.01.2011
Ort: -
Alter: 33
Geschlecht: 
|
Verfasst Mi 26.03.2014 14:20
Titel JavaScript: Position von BackgroundImages anpassen |
  |
|
Ein wunderschönen guten Tag,
ich habe mal wieder ein Anliegen. Nachdem ich für mein Portfolio nun schon einige super hilfreiche Tips von euch bekommen habe und ich mein Wissen in HTML und CSS dadurch schon um einiges vergrößern konnte, wage ich mich nun an JavaScript und bin sogleich auf ein Problem gestoßen, welches ich bisher nicht lösen konnte. Vielleicht fehlt mir einfach nur der richtige Suchansatz, darum wäre ich euch dankbar, wenn ihr mir mit einem solchen oder einem anderen Ratschlag weiterhelfen könntet 
Folgendes:
Ich habe mit JavaScript bereits eine Bildergalerie erstellt, durch die der Nutzer mit Vor- und Zurück-Buttons navigieren kann. Die verwendeten Bilder sind BackgroundImages, die durch background-size: cover; immer den gesamten Screen ausfüllen. Soweit so gut...
Jetzt möchte ich allerdings, dass die Bilder mittels background-position weiter angepasst werden, damit durch Veränderung des Browserfensters immer der jeweils richtige Bildausschnitt sichtbar ist. Das Problem ist, bei jedem Bild ist es ein anderer Bildausschnitt. Aus diesem Grund würde ich gerne eine Funktion haben, die überprüft ob z.B. gerade Bild vier angezeigt wird und wenn ja, soll die Funktion entsprechend den Bildausschnitt über background-position anpassen.
Ich zeige euch mal den Code meiner Testseite:
| Zitat: |
<html>
<head>
<title>Bildergalerie</title>
<style>
a {
font-size:22px;
position:fixed;
text-decoration:none;
color:#414BA7;
z-index:2;}
#galerie{
background-image:url(img/halbe-emotionen/01n.jpg);
position:fixed;
width:100%;
height:100%;
background-size:cover;
background-position:left top;
z-index:0;}
</style>
<script type="text/javascript">
var zahl=1;
function vor()
{
zahl++;
if(zahl>4) //Wenn Zahl gleich vier wird
{zahl=1;} //soll Zahl auf eins springen
document.getElementById("galerie").style.backgroundImage= "url('img/halbe-emotionen/0"+zahl+"n"+".jpg')";
}
function zurueck()
{
zahl--;
if(zahl<1) //Wenn Zahl kleiner als eins wird
{zahl=4;} //Soll Zahl auf vier springen
document.getElementById("galerie").style.backgroundImage= "url('img/halbe-emotionen/0"+zahl+"n"+".jpg')";
}
function positionTopRight()
{
if(Zahl=2)
{document.getElementById("galerie").style.backgroundPosition="center right";}
}
window.onload = positionTopRight();
</script>
</head>
<body>
<center>
<div id="galerie"></div>
<a href="#" onclick="vor()">vorwärts</a>
<a href="#" onclick="zurueck()">zurück</a>
</center>
</body>
</html> |
in einem Forum habe ich folgenden Befehl gefunden:
| Zitat: | | document.getElementById("galerie").style.backgroundPosition="center right"; //verändert BackgroundPosition ab Bild zwei |
klappt auch wunderbar, wenn ich nur diesen Befehl in die Funktion einbaue, nur das hilft mir ja leider nicht, da sie nur bei bestimmten Bildern greifen soll...
Ich hoffe mein Problem ist verständlich geworden und ihr könnt mir da iwie auf die Sprünge helfen.
Liebe Grüße
|
|
| |
   |
 |
buddha-brot
Dabei seit: 24.01.2006
Ort: Süd/Süd-West
Alter: -
Geschlecht: 
|
Verfasst Mi 26.03.2014 17:29
Titel
|
|
|
Ich würde an die Sache anders rangehen und erst mal ein wenig Ordnung schaffen.
Hast du dich schon mit Arrays und Objekten befasst?
| Code: |
<script type="text/javascript">
var bilder = []; // neues, leeres Array erzeugen
var bild1 = {}; // neues, leeres Objekt erzeugen, beachte den Unterschied zum Array in der Schreibweise [] <> {}
bild1.dateiname = "01n.jpg"; // dem Objekt neue Eigenschaften mitgeben und mit Werten füllen
bild1.position = "top left";
bilder.push(bild1); // das Bild-Objekt zum Array hinzufügen
// wiederhole das mit den anderen Bildern
var zahl=0;
function vor()
{
zahl++;
if(zahl>bilder.length) //Wenn Zahl größer als die Anzahl Bilder im Array wird
{zahl=0;} // Zahl zurücksetzen
wechsleBackgroundImage(bilder[zahl]);
}
function zurueck()
{
zahl--;
if(zahl<0) //Wenn Zahl kleiner als 0 wird
{zahl=bilder.length-1;} //Soll Zahl auf Anzahl Bilder - 1 springen
wechsleBackgroundImage(bilder[zahl]);
}
function wechsleBackgroundImage(bild) {
document.getElementById("galerie").style.backgroundImage= "url('img/halbe-emotionen/'" + bild.dateiname + "')";
document.getElementById("galerie").style.backgroundPosition= bild.position;
}
</script>
|
|
|
| |
|
|
|
Anzeige
|
|
|
Bijou
Threadersteller
Dabei seit: 26.01.2011
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Mi 26.03.2014 17:51
Titel
|
|
|
@buddha Brot:
oh ja 
Auf den ersten Blick macht das auf jeden Fall schon mal Sinn für mich. Danke dafür. Werde mir das morgen mal in Ruhe ansehen und ausprobieren.
|
|
| |
|
|
Bijou
Threadersteller
Dabei seit: 26.01.2011
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Do 27.03.2014 16:04
Titel
|
|
|
Soo...jetzt hapert es leider ein bisschen an meinem Verständnis. Habe mir gerade Tutorials zu Arrays und Objekten angeschaut, war auch sehr hilfreich. Trotzdem verstehe ich noch nicht alles. Ich versuche mal, es so zu erklären, wie ich es verstehe und dann wird vielleicht deutlich, wo ich nicht weiterkomme.
| Zitat: | | var bilder = []; // neues, leeres Array erzeugen |
Es wird ein neues Array mit dem Namen bilder erzeugt. Was sich darin befindet, ist zu dem Zeitpunkt noch nicht klar
| Zitat: | var bild1 = {}; // neues, leeres Objekt erzeugen, beachte den Unterschied zum Array in der Schreibweise [] <> {}
bild1.dateiname = "01n.jpg"; // dem Objekt neue Eigenschaften mitgeben und mit Werten füllen
bild1.position = "top left";
bilder.push(bild1); // das Bild-Objekt zum Array hinzufügen |
Es werden Elemente mit dem Namen bild1, bild2, bild3, usw. definiert, die nachher in der Funktion wechselBackgroundImage gebraucht werden. Die Werte .dateiname und .position werden für jedes Bild angepasst und später verwendet
| Zitat: | | bilder.push(bild1); // das Bild-Objekt zum Array hinzufügen |
Wie du schon schreibst, werden hier bild1, bild2, bild3, usw. zu dem Array bilder hinzugefügt zu. Dies muss für alle Bilder wiederholt werden???
Zu beginn ist der Wert Zahl = 0
(Frage: ist das nicht sowieso durch den PC so vorgegeben, dass Werte nicht bei eins, sondern bei 0 starten?)
| Zitat: | function vor()
{
zahl++;
if(zahl>bilder.length) //Wenn Zahl größer als die Anzahl Bilder im Array wird
{zahl=0;} // Zahl zurücksetzen
wechsleBackgroundImage(bilder[zahl]);
} |
Das ist die Funktion, die ausgelöst wird wenn der Button mit dem OnCLick-Event vor() ausgelöst wird. Zuerst wird der aktuellen Zahl, eine weitere Zahl hinzugefügt. Wenn dabei die Anzahl der Bilder übertreten wird, soll der Wert auf 0 zurückgesetzt werden. Dadurch wird dann bedingt, dass die Galerie wieder von vorne beginnt.
Hierzu haben ich aber noch eine Frage:
wie setzt sich wechsleBackgroundImage(bilder[zahl]) zusammen? Also ich glaube, damit ist gemeint, dass die gleichnamige Funktion an dieser Stelle ausgeführt werden soll, aber woraus ergibt sich (bilder[zahl])?
Gleiches natürlich auch bei der Funktion zurück()
| Zitat: | function wechsleBackgroundImage(bild) {
document.getElementById("galerie").style.backgroundImage= "url('img/halbe-emotionen/'" + bild.dateiname + "')";
document.getElementById("galerie").style.backgroundPosition= bild.position;
} |
Hier verstehe ich nicht, wieso in der Klammer in der ersten Zeile Bild steht, muss der Wert von mir ersetzt werden oder wird das von JavaScript angepasst?
Ei ei ei, so viele Fragen, ich hoffe du kannst, oder jemand anderes kann mir dabei noch ein bisschen Licht ins dunkel bringen. Das wäre ganz toll 
|
|
| |
|
|
Bijou
Threadersteller
Dabei seit: 26.01.2011
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Do 27.03.2014 16:35
Titel
|
|
|
|
Ich sehe gerade, dass ich mit meinem Thema in ein ganz falschen Unterthema geraten bin. Müsste ja eigentlich in Programmierung gepostet werden. Kann ich das noch ändern nachträglich?
|
|
| |
|
|
buddha-brot
Dabei seit: 24.01.2006
Ort: Süd/Süd-West
Alter: -
Geschlecht:
|
Verfasst Do 27.03.2014 18:43
Titel
|
|
|
Also da fehlt dir noch eine ganze Menge an grundlegendem Verständnis für Programmierung 
Fang mal hier an. Das ist eine ganz gute Referenz zum Einstieg in JS.
| Bijou hat geschrieben: | Soo...jetzt hapert es leider ein bisschen an meinem Verständnis. Habe mir gerade Tutorials zu Arrays und Objekten angeschaut, war auch sehr hilfreich. Trotzdem verstehe ich noch nicht alles. Ich versuche mal, es so zu erklären, wie ich es verstehe und dann wird vielleicht deutlich, wo ich nicht weiterkomme.
| Zitat: | | var bilder = []; // neues, leeres Array erzeugen |
Es wird ein neues Array mit dem Namen bilder erzeugt. Was sich darin befindet, ist zu dem Zeitpunkt noch nicht klar
zu diesem Zeitpunkt befindet sich nichts darin. Es ist quasi ein leerer Container.
| Zitat: | var bild1 = {}; // neues, leeres Objekt erzeugen, beachte den Unterschied zum Array in der Schreibweise [] <> {}
bild1.dateiname = "01n.jpg"; // dem Objekt neue Eigenschaften mitgeben und mit Werten füllen
bild1.position = "top left";
bilder.push(bild1); // das Bild-Objekt zum Array hinzufügen |
Es werden Elemente mit dem Namen bild1, bild2, bild3, usw. definiert, die nachher in der Funktion wechselBackgroundImage gebraucht werden. Die Werte .dateiname und .position werden für jedes Bild angepasst und später verwendet
| Zitat: | | bilder.push(bild1); // das Bild-Objekt zum Array hinzufügen |
Wie du schon schreibst, werden hier bild1, bild2, bild3, usw. zu dem Array bilder hinzugefügt zu. Dies muss für alle Bilder wiederholt werden???
ja, alternativ akzeptiert die Methode .push auch mehrere kommaseparierte Objekte auf einmal, also bilder.push(bild1, bild2, bild3, ....)
Zu beginn ist der Wert Zahl = 0
(Frage: ist das nicht sowieso durch den PC so vorgegeben, dass Werte nicht bei eins, sondern bei 0 starten?)
mit zahl=0 wird festgelegt, dass es sich bei dieser Variable um einen Integer-Wert handelt. mit zahl='0' wäre es z.B. ein String geworden
| Zitat: | function vor()
{
zahl++;
if(zahl>bilder.length) //Wenn Zahl größer als die Anzahl Bilder im Array wird
{zahl=0;} // Zahl zurücksetzen
wechsleBackgroundImage(bilder[zahl]);
} |
Das ist die Funktion, die ausgelöst wird wenn der Button mit dem OnCLick-Event vor() ausgelöst wird. Zuerst wird der aktuellen Zahl, eine weitere Zahl hinzugefügt. Wenn dabei die Anzahl der Bilder übertreten wird, soll der Wert auf 0 zurückgesetzt werden. Dadurch wird dann bedingt, dass die Galerie wieder von vorne beginnt.
der aktuellen Zahl wird keine weitere Zahl hinzugefügt, sondern der Wert (in dem Fall 0) um 1 erhöht
Hierzu haben ich aber noch eine Frage:
wie setzt sich wechsleBackgroundImage(bilder[zahl]) zusammen? Also ich glaube, damit ist gemeint, dass die gleichnamige Funktion an dieser Stelle ausgeführt werden soll, aber woraus ergibt sich (bilder[zahl])?
mit bilder[zahl] holt man sich das Bild-Objekt an der Stelle zahl aus dem Array heraus. Da es in den Klammern beim Methodenaufruf steht, wird das Bild-Objekt so an die Methode zur weiteren Verarbeitung übergeben.
Gleiches natürlich auch bei der Funktion zurück()
| Zitat: | function wechsleBackgroundImage(bild) {
document.getElementById("galerie").style.backgroundImage= "url('img/halbe-emotionen/'" + bild.dateiname + "')";
document.getElementById("galerie").style.backgroundPosition= bild.position;
} |
Hier verstehe ich nicht, wieso in der Klammer in der ersten Zeile Bild steht, muss der Wert von mir ersetzt werden oder wird das von JavaScript angepasst?
die Methode arbeitet intern mit der Variable 'bild'. Sie erwartet, dass beim Aufruf ein entsprechendes Objekt übergeben wird, so wie es in vor() und zurueck() ja der Fall ist.
Da ja bei jedem Bildwechsel mit jedem Bild-Objekt das gleiche passieren muss, kann man dieses Verhalten einmal in einer Methode definieren und dann lässt man von dieser einfach das entsprechende Objekt verarbeiten
Ei ei ei, so viele Fragen, ich hoffe du kannst, oder jemand anderes kann mir dabei noch ein bisschen Licht ins dunkel bringen. Das wäre ganz toll |
Ich hoffe, dass dich das etwas erhellt hat. Aber lies dir wirklich Stück für Stück die Grundlagen durch. Nur so verstehst du die einzelnen Zusammenhänge und kannst nachvollziehen, was das Skript tut.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
AP Div Position an Fenstergröße anpassen
[JavaScript] Scrolleisten-Position bestimmen/ändern
[javascript] menü anpassen
Iframe Höhe per Javascript anpassen
[JavaScript] Fenstergröße dem Inhalt anpassen
[JavaScript] GoogleMaps API Navigation anpassen/Formular/...
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
