Jump to content

Add Simple HTML Gallery

doolin

By doolin,
in Getting Started

 Share

Recommended Posts

doolin Jr. Member

doolin

Posted
Posted

hi guys
 
I wanna add a simple html image gallery from here:
 
http://basicuse.net/articles/pl/textile/html_css/how_to_create_a_simple_css_gallery_without_using_javascript
 
i try this in the in my template file:
 

<?php
foreach($page->bild as $image) {
   $thumbnail = $image->size(150,100);
   echo "<li><a href='#{$thumbnail->description}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></li>";
}
   echo "</ul><div id='full-picture'>";
   echo "<div><a name='{$thumbnail->description}'><img src='{$image->url}' alt='{$thumbnail->description}' ></a></div>";
?>
  </div>
</div>

 
but it dont show the image when i click on a thumbnail. I think i have to add something into the loop. But what?
 
can anyone give me a tipp?
 
thank you

Link to comment
Share on other sites
DaveP Hero Member

DaveP

Posted
Posted

Hi doolin, and welcome!

<?php
$fullpictures = "";
?>
<div id="gallery">
  <ul id="navigation">
    <?php
    foreach($page->bild as $image) {
        $thumbnail = $image->size(150,100);
        echo "<li><a href='#{$thumbnail->description}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></li>";
        $fullpictures .= "<div><a name='{$thumbnail->description}'><img src='{$image->url}' alt='{$thumbnail->description}' ></a></div>";
    }
    ?>
  </ul>
  <div id="full-picture">
    <?php
    echo $fullpictures;
    ?>
  </div>
</div>

Written in browser, so I hope

  1. it works, and
  2. you can follow what I've done.

Essentially, I've taken the example code from the article you were following, and replaced bits with php. The main difference is, so that I only need one loop, is build the content for the 'full-picture' div (in $fullpictures) at the same time as outputting the thumbnails markup, then echo it later within the html markup.

See if it works...  :)

  • Like 1
Link to comment
Share on other sites
doolin Jr. Member

doolin

Posted
  • Author
Posted
hi DaveP

Thank you!

I've tried the Code, but it doesnt work . It just displays all images, thumbnails and the full size when i click on one, nothing happens. It adds just a "#" after the "/" in the address bar. No error logs in the console.

Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted

Worked for me with the following code (but - see below):

<?php

	$small = '';
	$large = '';

	if (count($page->images)) {

		$i = 1;
		foreach ($page->images as $img) {

			$thumb = $img->size(200,150);
			$small .= '<li><a href="#pic' . $i . '"><img alt="" src="' . $thumb->url . '" /></a></li>';
			$large .= '<div><a name="pic' . $i . '"></a><img alt="" src="' . $img->url . '" /></div>';
			$i++;

		}//end foreach $page->images as $img

	}//end if count $page->images

?>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title><?php echo $title; ?></title>
		<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

		<style type="text/css">

			#gallery {
			width: 600px;
			overflow: hidden;
			position: relative;
			z-index: 1;
			margin: 100px auto;
			border: 2px solid #003C72;
			}

			#navigation {
			list-style: none;
			padding: 0;
			margin: 0;
			float: left;
			}

			#navigation li {
			padding: 0;
			margin: 0;
			float: left;
			clear: both;
			}

			#navigation li a img {
			display: block;
			border: none;
			}

			#navigation li a {
			display: block;
			}

			#full-picture {
			width: 500px;
			height: 375px;
			overflow: hidden;
			float: left;
			}

		</style>
	</head>
	<body>
		<h1><?php echo $page->title; ?></h1>

		<div id="gallery">
			<ul id="navigation"><?php echo $small?></ul>
			<div id="full-picture"><?php echo $large?></div>
		</div>

	</body>
</html>

However, as you can see in the discussions on the link you provided, there was an issue with page scrolling. An alternative version was provided here

For the updated coded, the following code worked for me (I had to tweak the CSS because I used large images). You might want to resize your images using ProcessWire rather than CSS.

You can see the demo here (expires in 7 days): http://aluminum-nue.lightningpw.com/gallery/

<?php

	$slides = '';
	$navigation = '';

	if (count($page->images)) {

		$i = 1;
		foreach ($page->images as $img) {

			$slides .= '<div id="slide' . $i . '"></div>';
    			$slides .= '<img src="' . $img->url . '" alt="" />';
			$navigation .= '<a href="#slide' . $i . '">' . $i . '</a>';
			$i++;

		}//end foreach $page->images as $img

		$default = '<img class="default" src="' . $page->images->first()->url . '" alt="" />';

	}//end if count $page->images

?>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title><?php echo $title; ?></title>
		<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

		<style type="text/css">

			#image-slider {
				margin: 0 auto;
				width: 1500px;
			}

			#navigation {
				margin: 5px 0 0 0;
				text-align: center;
				z-index: 10;
			}

			#navigation a {
				text-decoration: none;
				background: #003C72;
				padding: 2px 6px;
				color: #FFFFFF;
				display: inline-block;
			}

			#navigation a:hover {
				background: #0182C4;
			}

			#slides {
				height: 980px;
				overflow: hidden;
				position: relative;
			}

			#slides img {
				position: absolute;
				top: 0;
				left: -500px;
			}

			#slides img {
				z-index: 1;
				opacity: 0;
				/* animation */
				transition: all linear 400ms;
				-o-transition: all linear 400ms;
				-moz-transition: all linear 400ms;
				-webkit-transition: all linear 400ms;
			}

			#slides div {
				display: none;
				position: fixed;
			}

			#slides div:target + img {
				left: 0;
				z-index: 5;
				opacity: 1;
			}

			#slides img.default {
				left: 0;
				z-index: 5;
				opacity: 1;
			}

			#slides div:target ~ img.default {
				z-index: 1;
				opacity: 0;
				left: -500px;
			}

		</style>
	</head>
	<body>
		<h1><?php echo $page->title; ?></h1>

		<div id="image-slider">

		  	<div id="slides">	
				<?php echo $slides?>
		    	<?php echo $default?>
		  	</div>
		  
			<div id="navigation"><?php echo $navigation?></div>

		</div>

	</body>
</html>
  • Like 3
Link to comment
Share on other sites
  • 11 months later...
Christophe Hero Member

Christophe

Posted
Posted

I've implemented this in ProcessWire: https://processwire.com/talk/topic/6730-js-library-for-simple-product-image-gallery-with-thumbnails-no-lightbox-or-transitions-just-click-and-view/

The result is very nice. But the big image(s) was flickering. Some times the 2 same images, sometimes (also) others.

I've tried different things to reduce/stop the flickering, but nothing has changed it. It has always/often been only when clicking the first time on an image (after cleaning the (browser) cache).

So I've implemented this one.

Having both has apparently stopped the flickering (if it's not due to something else). (Seems somehow logical, perhaps related to the cache...)

But now, with this gallery system (which is also nice) it seems almost impossible to make it responsive (I hadn't noticed it wasn't).

I'll probably have to find a third solution.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...