I’ve made a simple PHP image gallery that works fine when there is only one on a page, but when I put more than one gallery on a page, they seem to affect each other and I can’t figure out why. There is no database, I just have an array of the image names. I’ve named each array differently and all variables for each gallery differently, but when press on the thumbnail for the second image in a gallery it resets the other galleries back to image 1. Can anyone help explain to me why this happens. I am fairly new to PHP so it might be something simple that I just can’t see. Any insight would be much appreciated!
Here is a link to the live test page.
and following is the code:
<?php
$gallery01 = array(
array(
'image_id' => '1',
'filename' => 'gallery01_screenshot01.jpg',),
array(
'image_id' => '2',
'filename' => 'gallery01_screenshot02.jpg',),
array(
'image_id' => '3',
'filename' => 'gallery01_screenshot03.jpg',),
);
$gallery02 = array(
array(
'image_id' => '1',
'filename' => 'gallery02_screenshot01.jpg',),
array(
'image_id' => '2',
'filename' => 'gallery02_screenshot02.jpg',),
);
$gallery03 = array(
array(
'image_id' => '1',
'filename' => 'gallery03_screenshot01.jpg',),
array(
'image_id' => '2',
'filename' => 'gallery03_screenshot02.jpg',),
);
// get the name for the gallery 01 main image
if (isset($_GET['gallery01_image'])) {
$gallery01_mainImage = $_GET['gallery01_image'];
}
else {
$gallery01_mainImage = $gallery01[0]["filename"];
}
// get the name for the gallery 02 main image
if (isset($_GET['gallery02_image'])) {
$gallery02_mainImage = $_GET['gallery02_image'];
}
else {
$gallery02_mainImage = $gallery02[0]["filename"];
}
// get the name for the gallery 03 main image
if (isset($_GET['gallery03_image'])) {
$gallery03_mainImage = $_GET['gallery03_image'];
}
else {
$gallery03_mainImage = $gallery03[0]["filename"];
}
?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> TEST </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1" />
<link rel="stylesheet" type="text/css" href="reset.css" title="default" />
<link rel="stylesheet" type="text/css" href="style.css" title="default" />
</head>
<body id="portfolio">
<div id="container">
<div class="content">
<div class="work">
<div class="gallery">
<img src="media/<?php echo $gallery01_mainImage; ?>" alt="gallery 01 Screenshot" />
<ul class="views">
<?php
for ($row = 0; $row < count($gallery01); $row++) {
?>
<!--set class of list item to "selected" if on current image-->
<li <?php
if ($gallery01[$row]["filename"] == $gallery01_mainImage) {
echo 'class="selected"';
}
?>><a href="<?php echo $_SERVER['PHP_SELF']; ?>?gallery01_image=
<?php echo $gallery01[$row]["filename"]?>"> <?php echo $gallery01[$row]["image_id"]?></a></li>
<?php }
?>
</ul>
</div> <!--end gallery-->
<div class="description">
<p><strong>gallery 01</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris euismod, velit ut aliquam lobortis, est ipsum porttitor magna, a tempor urna urna sed pede. Quisque laoreet. Praesent aliquam arcu nec sapien.</p>
<ul class="col">
<li class="check">Link 1</li>
<li class="check">Link 2</li>
<li class="check">Link 3</li>
</ul> <!--end col-->
<ul class="col">
<li class="check">Link 4</li>
<li class="check">Link 5</li>
<li class="check">Link 6</li>
</ul> <!--end col-->
<p class="externalLink">
<a href="" title="">Visit Site</a>
</p>
</div> <!--end description-->
</div> <!--end work-->
<div class="work">
<div class="gallery">
<img src="media/<?php echo $gallery02_mainImage; ?>" alt="gallery 02 Screenshot" />
<ul class="views">
<?php
for ($row = 0; $row < count($gallery02); $row++) {
?>
<!--set class of list item to "selected" if on current image-->
<li <?php
if ($gallery02[$row]["filename"] == $gallery02_mainImage) {
echo 'class="selected"';
}
?>><a href="<?php echo $_SERVER['PHP_SELF']; ?>?gallery02_image=
<?php echo $gallery02[$row]["filename"]?>"> <?php echo $gallery02[$row]["image_id"]?></a></li>
<?php }
?>
</ul>
</div> <!--end gallery-->
<div class="description">
<p><strong>gallery 02</strong> usce convallis justo id mi. Quisque tempor. Vivamus at libero ac elit viverra tempus. Pellentesque lobortis, arcu molestie porttitor elementum, diam elit elementum nunc, ut pulvinar eros urna et elit.</p>
<ul class="col">
<li class="check">Link 1</li>
<li class="check">Link 2</li>
<li class="check">Link 3</li>
</ul> <!--end col-->
<p class="externalLink">
<a href="" title="">Visit Site</a>
</p>
</div> <!--end description-->
</div> <!--end work-->
<div class="work">
<div class="gallery">
<img src="media/<?php echo $gallery03_mainImage; ?>" alt="gallery 03 Screenshot" />
<ul class="views">
<?php
for ($row = 0; $row < count($gallery03); $row++) {
?>
<!--set class of list item to "selected" if on current image-->
<li <?php
if ($gallery03[$row]["filename"] == $gallery03_mainImage) {
echo 'class="selected"';
}
?>><a href="<?php echo $_SERVER['PHP_SELF']; ?>?gallery03_image=
<?php echo $gallery03[$row]["filename"]?>"> <?php echo $gallery03[$row]["image_id"]?></a></li>
<?php }
?>
</ul>
</div> <!--end gallery-->
<div class="description">
<p><strong>gallery 03</strong> Curabitur aliquam. Etiam sed ante. Sed porta urna quis erat. Nunc velit. Vestibulum non sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacinia.</p>
<ul class="col">
<li class="check">Link 1</li>
<li class="check">Link 2</li>
<li class="check">Link 3</li>
</ul> <!--end col-->
<p class="externalLink">
<a href="" title="">Visit Site</a>
</p>
</div> <!--end description-->
</div> <!--end work-->
</div> <!--end content-->
</div> <!--end container-->
</body>
</html>