Suche Bilder lösung für Projekt

[baumpaul]

Hallo,

Ich suche für diese Seite eine Bilderlösung in CMS
http://cms.nickel-wohntextil.de/front_c ... ?idcat=107
hier ist die Seite bereits in HTML fertig:
http://www.nickel-wohntextil.de/Kollektion/Deko.html

Unten findet man mehrere kleine Bilder. Alle sind mit 1.jpg, 2.jpg 3.... durchnummeriert.

Bein klick auf ein kleines soll sich das große Bild ändern ohne dass ich einen neuen Artikel erstelle oder sich die ganze Seite läd.

Man könnte es mit einem iframe machen aber ich suche eine schönere Lösung.

Hat jemand einen vorschlag wie man das machen kann?

[kummer]

mit javascript wie bei einem rollover... ich würd' mal googeln.

[baumpaul]

mit javascript wie bei einem rollover... ich würd' mal googeln.

Sehr gute Idee, nur leider hakt es an der umsetzung

Hier mein Bild Modul für das kleien Bild

Code: Alles auswählen

<?php

if ("CMS_IMG[11]" != "") {

    $img = '<img src="CMS_IMG[11]" border="0" name="tub2" id="tub2" onClick="MM_swapImage('bild','','CMS_IMG[11]',0)>';


    if ("CMS_LINK[11]" != "http://") {
        $img = sprintf('<a href="#" target="%s">%s</a>',"CMS_LINK[11]", "CMS_LINKTARGET[11]", $img);

    }

    echo $img;

}

echo "<br>";
echo "CMS_IMGDESCR[11]";
// echo "<br>";
echo "CMS_LINKDESCR[11]";
// echo "<br>";

?>

Habe in der HTML version getestet und dort schaut der Quellcode des Bildes so aus:

Code: Alles auswählen

<a href="#"><img src="../Images/Kollektion/Deko/Tub/2.jpg" name="tub2" width="81" height="50" border="0" id="tub2" onClick="MM_swapImage('bild','','../Images/Kollektion/Deko/Pix/2.jpg',0)"></a>

[kummer]

ok, du kannst folgendes machen:

(1) folgenden code an den browser ausgeben:

Code: Alles auswählen

<script type="text/javascript">
<!--
Bild1 = new Image();
Bild1.src = "bild1.jpg";
Bild2 = new Image();
Bild2.src = "bild2.jpg";
Bild3 = new Image();
Bild3.src = "bild3.jpg";
Bild4 = new Image();
Bild4.src = "bild4.jpg";
Bild5 = new Image();
Bild5.src = "bild5.jpg";
Bild6 = new Image();
Bild6.src = "bild16.jpg";

function Bildwechsel(Bildnr,Bildobjekt) {
Bildnr.src = Bildobjekt.src;
}
//-->
</script>

wobei du natürlich die für bild1, bild2 usw. die richtigen pfade zu den grossen bildern angeben musst.

(2) die kleinen bilder normal einfügen.

(3) das erste grosse bild auch normal einfügen. als zusätzliches attribut gibst du dem bild den namen 'bildgross'. also in etwa so...

Code: Alles auswählen

<img src="bild1.jpg" width="200" height="100" border="0" name="bildgross" />

(4) dann fügst du bei den kleinen bilder als zusätzliches attribut ein...

Code: Alles auswählen

onClick="Bildwechsel(bildgross,Bild1)"

wobei natürlich beim zweiten bild dann Bild1 durch Bild2 zu ersetzen ist usw.

das ist es dann schon.

viel glück beim ausprobieren.

gruss,
andreas

[baumpaul]

Hallo,

danke für die Hilfe aber ich bräuchte meine Code umgeschrieben.

Das Script für den Header habe ich bereits. Es fehlt nur noch dieses Modul.

[kummer]

die gepostete version wird nicht funktionieren. das bild muss bereits instanziiert sein, damit du es zuweisen kannst.

[baumpaul]

die gepostete version wird nicht funktionieren. das bild muss bereits instanziiert sein, damit du es zuweisen kannst.

Verdammt! Dann muss ich wohl deine Version ausprobieren.

[kummer]

der scriptbereich braucht nicht unbedingt im header zu sein. du kannst deshalb auch folgendes machen:

(1) ein bildmodul für das grosse bild. darin gibst du als zusätzliches attribut den namen an. in die ausgabe kannst du auch die funktion pappen.

(2) ein bildmodul für jedes kleine bild. darin machst du dann die instanziierung (also die zwei zeilen je bild).

[baumpaul]

Hmm, Java kann ich eigentlich nicht.

Aber so wie ich das sehe funktioniert das bei mir nicht, da es mehrere Seiten gibt und damit auch dir URL des kleinen und großen Bilder unterschiedlich.

[kummer]

das macht ja das modul, wenn du es so programmierst.

[kummer]

also hier ist die lösung:

http://452.w3concepts.net/cms/front_con ... p?idcat=50

ich hoffe, das ist so, wie du dir das vorgestellt hast. falls ja, ist hier der code:

Code: Alles auswählen

<?php

class picOnClick {

	function picOnClick() {

		global $edit;

		$this->setIniValues();
		
		if ($edit) {
			$this->showEditPics();
		} else {
			echo $this->getJsCode();
			echo $this->getPics();
		}
	}

	function setIniValues() {
		
		$this->bild[0] =array("CMS_IMG[100]","CMS_IMGDESCR[100]","CMS_LINKDESCR[100]");
		$this->bild[1] =array("CMS_IMG[101]","CMS_IMGDESCR[101]","CMS_LINKDESCR[101]");
		$this->bild[2] =array("CMS_IMG[102]","CMS_IMGDESCR[102]","CMS_LINKDESCR[102]");
		$this->bild[3] =array("CMS_IMG[103]","CMS_IMGDESCR[103]","CMS_LINKDESCR[103]");
		$this->bild[4] =array("CMS_IMG[104]","CMS_IMGDESCR[104]","CMS_LINKDESCR[104]");
		$this->bild[5] =array("CMS_IMG[105]","CMS_IMGDESCR[105]","CMS_LINKDESCR[105]");
		$this->bild[6] =array("CMS_IMG[106]","CMS_IMGDESCR[106]","CMS_LINKDESCR[106]");
		$this->bild[7] =array("CMS_IMG[107]","CMS_IMGDESCR[107]","CMS_LINKDESCR[107]");
		$this->bild[8] =array("CMS_IMG[108]","CMS_IMGDESCR[108]","CMS_LINKDESCR[108]");
		$this->bild[9] =array("CMS_IMG[109]","CMS_IMGDESCR[109]","CMS_LINKDESCR[109]");
		$this->bild[10] =array("CMS_IMG[110]","CMS_IMGDESCR[110]","CMS_LINKDESCR[110]");
		$this->bild[11] =array("CMS_IMG[111]","CMS_IMGDESCR[111]","CMS_LINKDESCR[111]");
		$this->bild[12] =array("CMS_IMG[112]","CMS_IMGDESCR[112]","CMS_LINKDESCR[112]");
		$this->bild[13] =array("CMS_IMG[113]","CMS_IMGDESCR[113]","CMS_LINKDESCR[113]");
		$this->bild[14] =array("CMS_IMG[114]","CMS_IMGDESCR[114]","CMS_LINKDESCR[114]");
		$this->bild[15] =array("CMS_IMG[115]","CMS_IMGDESCR[115]","CMS_LINKDESCR[115]");
		$this->bild[16] =array("CMS_IMG[116]","CMS_IMGDESCR[116]","CMS_LINKDESCR[116]");
		$this->bild[17] =array("CMS_IMG[117]","CMS_IMGDESCR[117]","CMS_LINKDESCR[117]");
		$this->bild[18] =array("CMS_IMG[118]","CMS_IMGDESCR[118]","CMS_LINKDESCR[118]");
		$this->bild[19] =array("CMS_IMG[119]","CMS_IMGDESCR[119]","CMS_LINKDESCR[119]");
		$this->bild[20] =array("CMS_IMG[120]","CMS_IMGDESCR[120]","CMS_LINKDESCR[120]");
	}

	function showEditPics() {

		foreach ($this->bild as $key => $bild) {
		
			echo '<p>';

			$key2 = floor($key / 2);
			$key3 = $key / 2;
			$gerade = ($key3 == $key2)?(true):(false);
	
			if ($key == 0) {
				echo '<div><strong>Grosses Bild (Anfangszustand):</strong></div>';
			} elseif ($gerade) {
				$bildnr = $key/2;
				echo "<div>Bild Nr. $bildnr (gross)</div>";
			} else {
				$bildnr = floor($key/2) + 1;
				echo "<div>Bild Nr. $bildnr (klein)</div>";
			}
			
			if ($bild[0] != "") echo "<div><img src=\"{$bild[0]}\" border=\"0\"></div>";
			echo "{$bild[1]}";
			echo "{$bild[2]}";

			echo '</p>';
		}
	}

	function getJsCode() {

		$returnvalue = "
			<script type=\"text/javascript\">
			<!--
			";

		for ($i=2;$i<count($this->bild);$i=$i+2) {

			$returnvalue .= $this->getJsCodeSnippet($i);
		}

		$returnvalue .= "
			function picOnClick(Bildnr,Bildobjekt) {
				Bildnr.src = Bildobjekt.src;
			}
			//-->
			</script>
			";

		return $returnvalue;
	}

	function getJsCodeSnippet($i) {

		if (empty($this->bild[$i][0])) return '';
	
		$returnvalue = "
			Bild$i = new Image();
			Bild$i.src = \"{$this->bild[$i][0]}\";
			";

		return $returnvalue;
	}

	function getPics() {

		$returnvalue = "<p><img src=\"{$this->bild[0][0]}\" name=\"picOnClickTarget\" /></p>\n";

		$counter = 1;
		for ($j=1;$j<3;$j++) {
			
			$returnvalue .= "<p>\n";
			for ($k=1;$k<6;$k++) {
				
				$returnvalue .= $this->getImageCode($counter++);
				$returnvalue .= "&nbsp;\n";
			}
			$returnvalue .= "</p>\n";
		}

		return $returnvalue;
	}

	function getImageCode($i) {

		
		$index = $i*2;

		if (empty($this->bild[$index-1][0])) return '';
		
		$returnvalue = "<a href=\"javascript:picOnClick(picOnClickTarget,Bild$index)\"><img src=\"{$this->bild[$index-1][0]}\" border=\"0\" onClick=\"picOnClick(picOnClickTarget,Bild$index)\" /></a>";

		return $returnvalue;
	}
}

$picOnClick = new picOnClick();
?>

gruss,
andreas

[baumpaul]

Wow, du bist ja verrückt oder hast viel Zeit

Vielen Dank, das ist ja perfekt. Werde ich gleich mal ausprobieren.

Weisst du übrigens einen Tread in dem die Frage zu den Newsletter beantwortet ist. Habe lange gesucht aber nichts gefunden. Error Log leer.
- Textfeld lässt sich nicht editieren.
- Freischaltung durch E-Mail-Link, Abmeldung, Stoppen, Wieder aufnehmen geht auch nicht.

Contenido Verdion 4.4.4 Newsletterversion weiss ich nicht.

Thx

[kummer]

tut mir leid, ich kenne das newslettermodul noch überhaupt nicht. noch nie gebraucht. kann dir leider da nicht weiterhelfen.

gruss,
andreas

[baumpaul]

Hier habe ich es eingebaut:

http://cms.nickel-wohntextil.de/front_c ... ?idcat=126

Nur finde ich nicht die Umbrüche die vor und unter den kleinen Bildern sind. Danach dürfte keiner sein und davor einer mit einer höhe von 20 px.

[kummer]

bei den umbrüchen handelt es sich einfach um ein <p>-tag. das findest du hier:

Code: Alles auswählen

$returnvalue .= "<p>\n";
			for ($k=1;$k<6;$k++) {
				
				$returnvalue .= $this->getImageCode($counter++);
				$returnvalue .= "&nbsp;\n";
			}
			$returnvalue .= "</p>\n";

du kannst das natürlich nach belieben verändern, respektive die absatzmarke einfach entfernen (oder besser: durch <div>-tags ersetzen).

also so:

Code: Alles auswählen

$returnvalue .= "<div>\n";
			for ($k=1;$k<6;$k++) {
				
				$returnvalue .= $this->getImageCode($counter++);
				$returnvalue .= "&nbsp;\n";
			}
			$returnvalue .= "</div>\n";

gruss,
andreas