Het gaat hier om een Joomla based site met een aantal custom componenten die niet zo ingewikkeld in elkaar zitten. Helaas is de maker hiervan spoorloos en zit ik een beetje in de knoop met het volgende. Ik zoek een vrij simpele oplossing om de foto's groter te kunnen weergeven in een nieuw venster of een lightbox wanneer je op de main image klikt. De foto's worden tevens in thumbnail formaat aan de rechterkant weergegeven zodat je kunt kiezen welke als main image optreedt. Dit laatste kan eventueel komen te vervallen zodat je bij klikken op de thumb direct een grotere versie in nieuw venster te zien krijgt.
De frontend van het component is de productpagina van een specifiek product, bijv: http://www.acryan.com/index.php?opti...d=42&Itemid=98
Ter verduidelijking, in de backend van de component voeren we per product een directory pad op de server in, waarin de foto's voor het product staan. Dit resulteert in een variable zodat elke productpagina hetzelfde script gebruikt met een andere image path.
Wie o wie kan mij helpen met dit vrij simpele stukje script?
Hier het eerste stukje code dat mijn inziens de variable voor de image directory neerzet:
Deze laat de main image zien:
En hier de thumbs:
De frontend van het component is de productpagina van een specifiek product, bijv: http://www.acryan.com/index.php?opti...d=42&Itemid=98
Ter verduidelijking, in de backend van de component voeren we per product een directory pad op de server in, waarin de foto's voor het product staan. Dit resulteert in een variable zodat elke productpagina hetzelfde script gebruikt met een andere image path.
Wie o wie kan mij helpen met dit vrij simpele stukje script?
Hier het eerste stukje code dat mijn inziens de variable voor de image directory neerzet:
code:
1
2
3
4
5
6
7
| $mainframe->addCustomHeadTag('<script language="javascript" type="text/javascript">function displaymainpictures(pic){document.getElementById(\'mainpicture\').src = pic.src;}function navNext(origin, dest){document.getElementById(dest).style.display="inline";document.getElementById(origin).style.display="none";}</script>');
$images = array();
if($product->imagepath != '' or $product->imagepath != null){
$path = $product->imagepath;
$images = dirList($_SERVER['DOCUMENT_ROOT'] . $path, 'image');
} |
Deze laat de main image zien:
code:
1
| <img src="<?php echo (sizeof($images) > 0 ? $path.$images[0] : '/images/stories/notavailable.jpg'); ?>" id="mainpicture" /> |
En hier de thumbs:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <?php
$i = 1; $divi = 1;
foreach($images as $img){
if($i%4==1){
if($i==1){
echo '<div id="div'.$divi.'" style="display: inline">';
$divi++;
}else{
echo '<img src="/images/stories/re-right.gif" align="top" class="nav-scroll" onclick="navNext(\'div'.($divi-1).'\',\'div'.$divi.'\');return false" /></div><div id="div'.$divi.'" style="display: none"><img src="/images/stories/re-left.gif" align="top" class="nav-scroll" onclick="navNext(\'div'.$divi.'\',\'div'.($divi-1).'\');return false" />';
$divi++;
}
}
echo '<img src="'.$path.$img.'" alt="image" width="100" onclick="displaymainpictures(this)" />';
$i++;
}
echo '</div>';
?> |
[ Voor 27% gewijzigd door Verwijderd op 16-07-2008 13:46 . Reden: stukje code ]
Ik zit ondertussen met onclick te proberen wat te bewerkstelligen en ik heb het idee dat ik het onder de knie begin te krijgen. :strip_icc():strip_exif()/u/148505/31bb5b263ef71bb4d5751e9a89035105.jpeg.jpg?f=community)