zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Serveradministration und serverseitige Scripte
Seite neu laden PHP: Dynamischer Bilderwechsel für jede neue Seite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 15.10.2007, 08:53
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Stimmt, die Galerie (du verwendest doch die ganz am Anfang gepostete von Stu oder?) müsstest du wohl anpassen, bzw. bei der von Stu Nicholls stehen die Bilder sogar als img im Code, sie werden nur ausgeblendet.
Ich hab mir seine Galerie bisher nicht näher angesehen, das werde ich bei Gelegenheit mal tun.

Wenn du Hintergrundbilder mit php setzen willst, dann würde ich bei so einer Galerie wahrscheinlich auf das style-Attribut zurückgreifen, statt eine komplett dynamische CSS-Datei zu verwenden. Das sieht zwar nachher im Code nicht ganz so toll aus, aber ist wesentlich weniger aufwändig.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 15.10.2007, 09:04
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

Ja, ich benutze eine leicht abgeänderte Variante dieser Galerie. Folgend steht hier das originale CSS und der HTML-Code:

Code:
<style type="text/css">

/* needed for IE to make :active state work first time */
a, a:visited {color:#000;} 

/* common styling for all galleries */
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}
a.slidea {background:url(london/thumb2.jpg);}
a.slideb {background:url(london/thumb3.jpg);}
a.slidec {background:url(london/thumb4.jpg);}
a.slided {background:url(london/thumb5.jpg);}
a.slidee {background:url(london/thumb6.jpg);}
a.slidef {background:url(london/thumb7.jpg);}
a.slideg {background:url(london/thumb8.jpg);}
a.slideh {background:url(london/thumb9.jpg);}
a.slidei {background:url(london/thumb10.jpg);}
a.slidej {background:url(london/thumb11.jpg);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}

/* styling for RIGHT gallery */
#container_right {position:relative; width:600px; height:305px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;}
#container_right img {border:0;}
#container_right .thumbs {width:170px; position:absolute; right:0; top:0;}
#container_right a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:-430px; padding:5px; font-style:italic; color:#fff;  z-index:100;}
#container_right a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#container_right a.gallery:active, #container_right a.gallery:focus {border:1px solid #000;}
#container_right a.gallery:active em, #container_right a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:5px; left:-425px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}
#container_right h1 {clear:both; margin:0; padding-top:80px; padding-left:50px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}
#container_right h1 em {font-size:0.6em; color:#000;}

</style>

Code:
<h3>Thumbnails at right</h3>
<div id="container_right">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="london/pic2.jpg" alt="LSE Square" title="LSE Square" /></em><span>LSE Square<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideb" href="#nogo"><em><img src="london/pic3.jpg" alt="Buckingham Palace" title="Buckingham Palace" /></em><span>Buckingham Palace<br />Photographs courtesy of stock.xchng</span></a>

<a class="gallery slidec" href="#nogo"><em><img src="london/pic4.jpg" alt="Tower Bridge" title="Tower Bridge" /></em><span>Tower Bridge<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slided" href="#nogo"><em><img src="london/pic5.jpg" alt="Tower of London" title="Tower of London" /></em><span>Tower of London<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidee" href="#nogo"><em><img src="london/pic6.jpg" alt="Houses of Parliament" title="Houses of Parliament" /></em><span>Houses of Parliament<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidef" href="#nogo"><em><img src="london/pic7.jpg" alt="St. Paul's Cathedral" title="St. Paul's Cathedral" /></em><span>St. Paul's Cathedral<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideg" href="#nogo"><em><img src="london/pic8.jpg" alt="The London Eye" title="The London Eye" /></em><span>The London Eye<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideh" href="#nogo"><em><img src="london/pic9.jpg" alt="Albert Hall" title="Albert Hall" /></em><span>Albert Hall<br />Photographs courtesy of stock.xchng</span></a>

<a class="gallery slidei" href="#nogo"><em><img src="london/pic10.jpg" alt="Wandsworth Common" title="Wandsworth Common" /></em><span>Wandsworth Common<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidej" href="#nogo"><em><img src="london/pic11.jpg" alt="London Taxi Cab" title="London Taxi Cab" /></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
</div>
<h1>Views<br /><em>of</em><br />London</h1>
</div>
Zitat:
Wenn du Hintergrundbilder mit php setzen willst, dann würde ich bei so einer Galerie wahrscheinlich auf das style-Attribut zurückgreifen, statt eine komplett dynamische CSS-Datei zu verwenden. Das sieht zwar nachher im Code nicht ganz so toll aus, aber ist wesentlich weniger aufwändig.
Könntest du mir das erläutern? Wie soll ich meinen Code abändern?
Momentan sieht das ganze so aus:
[CSS]
Code:
@charset "UTF-8";
/* CSS Document */

a.gallery,
a.gallery:visited
{
	display:block;
	display:inline-block;
	color:#FFF;
	text-decoration:none;
	border:2px solid #FFF;
	width:148px;
	height:82px;
	float:left;
	z-index:50;
	margin-bottom:-2px;
}
/*
a.slidea
{	background:url(../gfx/mpic_001.png);	}

a.slideb
{	background:url(../gfx/mpic_002.png);	}

a.slidec
{	background:url(../gfx/mpic_003.png);	}
*/
a.gallery em,
a.gallery span
{
	display:none;
}

a.gallery:hover
{
	border:2px solid white;
	margin-bottom:-2px;
}

#container_right
{
	position:relative;
	width:599px;
	right:1px;
	height:250px;
	background:url(../gfx/logo.gif) no-repeat 25% 50% #cfd0c8;
	border-bottom:2px solid white;	
	float:right;
}

#container_right img
{	border:0;	}

#container_right .thumbs
{
	width:150px;
	position:absolute;
	left:449px;
	top:-2px;
}

#container_right a.gallery:hover span:first-line
{
	font-style:normal;
	font-weight:bold;
	color:#FFF;
}

#container_right a.gallery:active,
#container_right a.gallery:focus
{
	border:2px solid #FFF;
}

#container_right a.gallery:active em,
#container_right a.gallery:focus em
{
	display:block;
	position:absolute;
	width:448px;
	height:250px;
	top:2px;
	left:-448px;
	color:#000;
	z-index:50;
}
PHP-Code:
<?php

    $allowedIds 
= array(
        
'sunasain','semnadur','seraina','sunasain-w1','sunasain-w2','sunasain-w3','sunasain-w4','semnadur-w1','semnadur-w2','seraina-w1','seraina-w2','seraina-w3'
    
);

    
$id 'default';
    if (!empty(
$_GET['id']) && in_array($_GET['id'], $allowedIds)) {
        
$id $_GET['id'];
    }

?>
<div id="container_right">
<div class="thumbs">
<a class="gallery slidea" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id?>_001.png" /></em></a>
<a class="gallery slideb" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id?>_002.png" /></em></a>
<a class="gallery slidec" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id?>_003.png" /></em></a>
</div>
</div>
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 15.10.2007, 10:30
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

So in der Art meinte ich das:
PHP-Code:
<?php

    $allowedIds 
= array(
        
'sunasain','semnadur','seraina','sunasain-w1','sunasain-w2','sunasain-w3','sunasain-w4','semnadur-w1','semnadur-w2','seraina-w1','seraina-w2','seraina-w3'
    
);

    
$id 'default';
    if (!empty(
$_GET['id']) && in_array($_GET['id'], $allowedIds)) {
        
$id $_GET['id'];
    }

?>
<div id="container_right">
<div class="thumbs">
<a class="gallery" style="background: url('../bilder/pic_<?php echo $id?>_001.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id?>_001.png" /></em></a>
<a class="gallery" style="background: url('../bilder/pic_<?php echo $id?>_002.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id?>_002.png" /></em></a>
<a class="gallery" style="background: url('../bilder/pic_<?php echo $id?>_001.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id?>_003.png" /></em></a>
</div>
</div>
(Sorry, hab grad viel zu tun hier, darum nur die knappe Antwort. Ich hoffe das hilft dir erstmal weiter.)
Mit Zitat antworten
  #14 (permalink)  
Alt 15.10.2007, 10:50
Benutzerbild von grischa_sgd
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 170
grischa_sgd befindet sich auf einem aufstrebenden Ast
Standard

Danke 1000x!!

Mit >
Code:
<div id="container_right">
<div class="thumbs">
<a class="gallery" style="background: url('txt/ferienwohnungen/bilder/mpic_<?php echo $id; ?>_001.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id; ?>_001.png" /></em></a>
<a class="gallery" style="background: url('txt/ferienwohnungen/bilder/mpic_<?php echo $id; ?>_002.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id; ?>_002.png" /></em></a>
<a class="gallery" style="background: url('txt/ferienwohnungen/bilder/mpic_<?php echo $id; ?>_003.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id; ?>_003.png" /></em></a>
</div>
</div>
< funktioniert es soweit genau so wie ich es mir vorgestellt habe.
Und noch was: bitte entschuldige dich nicht für so etwas - deine Arbeit/ect. geht vor! Danke für diesen Lösungsansatz!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre 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 aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Seite aus iFrame raushalten: klappt nicht in FF und Chrome Kangooroo (X)HTML 6 29.04.2010 10:29
Neue Seite fertig :-) CSS-Newbie Site- und Layoutcheck 14 18.05.2006 22:02
100% Valide Links - da sie eine neue Seite mit Parametern... dr_colossos Site- und Layoutcheck 2 31.01.2006 11:54
Neue Seite - Fehler laut W3C Pixel Design (X)HTML 25 14.12.2005 10:23
oper und anker im div Holger (HMR) CSS 25 18.01.2005 13:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:13 Uhr.