Image gallery
De afbeeldingen worden uitgelezen uit de database en zitten dus in een while lus.Om elke rij heb ik een div omheen gezet en die wat eigenschappen mee gegeven, maar ik kom er niet uit hoe ik dat voor mekaar kan krijgen.Ligt de fout in dit CSS scriptje?
Page:flagrace.xentia.nl/Newwebsite/portfolio.php
Quote:
@charset "utf-8";
/* CSS Document */
#middle
{
margin-top:175px;
margin-left:390px;
}
#eersterij
{
float:left;
}
#tweederij
{
float:left;
}
#derderij
{
float:left;
}
.VergrootglasBlauw
{
margin-left:-50px;
margin-bottom:22px;
}
.VergrootglasGroen
{
margin-left:-50px;
margin-bottom:22px;
}
.VergrootglasOranje
{
margin-left:-50px;
margin-bottom:22px;
}
/* CSS Document */
#middle
{
margin-top:175px;
margin-left:390px;
}
#eersterij
{
float:left;
}
#tweederij
{
float:left;
}
#derderij
{
float:left;
}
.VergrootglasBlauw
{
margin-left:-50px;
margin-bottom:22px;
}
.VergrootglasGroen
{
margin-left:-50px;
margin-bottom:22px;
}
.VergrootglasOranje
{
margin-left:-50px;
margin-bottom:22px;
}
Het probleem is dat niet hebt aangegeven tot hoe ver de plaatjes door mogen gaan. Als je de div #middle een width geeft van bijv. 976px dan zie je dat er 4 naast elkaar komen te staan.
Het is nu ook niet meer nodig om elke rij een nieuw ID mee te geven. Als je gewoon een ID maakt met daarin de opmaak scheelt dit je weer wat extra code.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="middle">
<?
$sql = "SELECT * FROM Website LIMIT 12";
$query = mysql_query($sql);
while($data = mysql_fetch_assoc($query))
{
if($data['Vergrootglas'] == "1")
{
?>
<div id="eersterij">
<img class="zoom" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>"><img class="VergrootglasBlauw" src="website_onderdelen/vergrootglasbutton_blauw.png" onMouseOver="src='website_onderdelen/vergrootglasbutton_roze.png'" onMouseOut="src='website_onderdelen/vergrootglasbutton_blauw.png'"/></a>
</div>
<? }
elseif($data['Vergrootglas'] == "2")
{ ?>
<div id="tweederij">
<img class="zoom2" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>"><img class="VergrootglasGroen" src="website_onderdelen/vergrootglasbutton_oranje.png" onMouseOver="src='website_onderdelen/vergrootglasbutton_roze.png'" onMouseOut="src='website_onderdelen/vergrootglasbutton_blauw.png'"/></a>
</div>
<? }
else
{ ?>
<div id="derderij">
<img class="zoom3" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>"><img class="VergrootglasOranje" src="website_onderdelen/vergrootglasbutton_groen.png" onMouseOver="src='website_onderdelen/vergrootglasbutton_roze.png'" onMouseOut="src='website_onderdelen/vergrootglasbutton_blauw.png'" /></a>
</div>
<? } ?>
<? } ?>
</div>
<?
$sql = "SELECT * FROM Website LIMIT 12";
$query = mysql_query($sql);
while($data = mysql_fetch_assoc($query))
{
if($data['Vergrootglas'] == "1")
{
?>
<div id="eersterij">
<img class="zoom" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>"><img class="VergrootglasBlauw" src="website_onderdelen/vergrootglasbutton_blauw.png" onMouseOver="src='website_onderdelen/vergrootglasbutton_roze.png'" onMouseOut="src='website_onderdelen/vergrootglasbutton_blauw.png'"/></a>
</div>
<? }
elseif($data['Vergrootglas'] == "2")
{ ?>
<div id="tweederij">
<img class="zoom2" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>"><img class="VergrootglasGroen" src="website_onderdelen/vergrootglasbutton_oranje.png" onMouseOver="src='website_onderdelen/vergrootglasbutton_roze.png'" onMouseOut="src='website_onderdelen/vergrootglasbutton_blauw.png'"/></a>
</div>
<? }
else
{ ?>
<div id="derderij">
<img class="zoom3" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>"><img class="VergrootglasOranje" src="website_onderdelen/vergrootglasbutton_groen.png" onMouseOver="src='website_onderdelen/vergrootglasbutton_roze.png'" onMouseOut="src='website_onderdelen/vergrootglasbutton_blauw.png'" /></a>
</div>
<? } ?>
<? } ?>
</div>
Toevoeging op 26/05/2011 15:52:01:
Ik heb er nu wel een breedte aangegeven alleen het grootste probleem is nog dat de vergrootglazen dan verkeerd staan want de linkerkant moet alleen een zwarte vergrootglas hebben middelste oranje rechtse kant groen
Gewijzigd op 26/05/2011 15:56:20 door Mitchoit Patron
Rick van Riel op 26/05/2011 15:52:46:
Zet even om heel je code [code-][/code-] ( zonder - ) dan kunnen we het wat duidelijker zien.
Kheb het al weer veranderd kwist eerst niet hoe dat moest :P
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="middle">
<?
$query = mysql_query("SELECT * FROM Website LIMIT 12");
while($data = mysql_fetch_assoc($query)):
if($data['Vergrootglas'] == "1"):
$vergrootglas = 'vergrootglas_blauw';
elseif($data['Vergrootglas'] == "2"):
$vergrootglas = 'vergrootglas_oranje';
else:
$vergrootglas = 'vergrootglas_groen';
endif;
?>
<div id="portfolio_foto">
<img class="zoom" alt="" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>">
<img class="<?php echo $vergrootglas; ?>" alt="" src="website_onderdelen/vergrootglasbutton_blauw.png" />
</a>
</div>
<? endwhile; ?>
</div>
<?
$query = mysql_query("SELECT * FROM Website LIMIT 12");
while($data = mysql_fetch_assoc($query)):
if($data['Vergrootglas'] == "1"):
$vergrootglas = 'vergrootglas_blauw';
elseif($data['Vergrootglas'] == "2"):
$vergrootglas = 'vergrootglas_oranje';
else:
$vergrootglas = 'vergrootglas_groen';
endif;
?>
<div id="portfolio_foto">
<img class="zoom" alt="" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>">
<img class="<?php echo $vergrootglas; ?>" alt="" src="website_onderdelen/vergrootglasbutton_blauw.png" />
</a>
</div>
<? endwhile; ?>
</div>
Als je het op deze manier doet gebruik je veel minder HTML. De attributen "onMouseO er" en "onMouseOut" heb ik eruit gehaald. Deze werden vroeger gebruikt, dit wordt voortaan gedaan via het :hover attribuut in CSS.
EDIT:
Code (php)
1
if($data['Vergrootglas'] == "1"):
Verwijdert uit de code anders zullen niet alle images worden getoond.
Gewijzigd op 26/05/2011 16:19:39 door Rick van Riel
Rick van Riel op 26/05/2011 16:11:18:
Als je het op deze manier doet gebruik je veel minder HTML. De attributen "onMouseO er" en "onMouseOut" heb ik eruit gehaald. Deze werden vroeger gebruikt, dit wordt voortaan gedaan via het :hover attribuut in CSS.
EDIT:
Verwijdert uit de code anders zullen niet alle images worden getoond.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="middle">
<?
$query = mysql_query("SELECT * FROM Website LIMIT 12");
while($data = mysql_fetch_assoc($query)):
if($data['Vergrootglas'] == "1"):
$vergrootglas = 'vergrootglas_blauw';
elseif($data['Vergrootglas'] == "2"):
$vergrootglas = 'vergrootglas_oranje';
else:
$vergrootglas = 'vergrootglas_groen';
endif;
?>
<div id="portfolio_foto">
<img class="zoom" alt="" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>">
<img class="<?php echo $vergrootglas; ?>" alt="" src="website_onderdelen/vergrootglasbutton_blauw.png" />
</a>
</div>
<? endwhile; ?>
</div>
<?
$query = mysql_query("SELECT * FROM Website LIMIT 12");
while($data = mysql_fetch_assoc($query)):
if($data['Vergrootglas'] == "1"):
$vergrootglas = 'vergrootglas_blauw';
elseif($data['Vergrootglas'] == "2"):
$vergrootglas = 'vergrootglas_oranje';
else:
$vergrootglas = 'vergrootglas_groen';
endif;
?>
<div id="portfolio_foto">
<img class="zoom" alt="" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>">
<img class="<?php echo $vergrootglas; ?>" alt="" src="website_onderdelen/vergrootglasbutton_blauw.png" />
</a>
</div>
<? endwhile; ?>
</div>
Als je het op deze manier doet gebruik je veel minder HTML. De attributen "onMouseO er" en "onMouseOut" heb ik eruit gehaald. Deze werden vroeger gebruikt, dit wordt voortaan gedaan via het :hover attribuut in CSS.
EDIT:
Code (php)
1
if($data['Vergrootglas'] == "1"):
Verwijdert uit de code anders zullen niet alle images worden getoond.
Tnx alleen op het laatste heb je nog een keer staan vergrootglasbutton == 1, maar dan leest tie alleen de afbeeldingen met een blauwe vergrootglas
*Al opgelost
Toevoeging op 26/05/2011 16:34:20:
Het enigste wat er nu nog fout aan is is dat tie alleen blauwe buttons weergeeft en geen oranje of groen.Voorderest staat alles goed!
Toevoeging op 26/05/2011 17:01:34:
Toevoeging op 26/05/2011 17:45:08:
Hoe zet je een image als hover?
Want als ik een hover maak en daarin zet ik een background image werkt het niet....
[
Gewijzigd op 26/05/2011 17:45:56 door Mitchoit Patron