large picture and thumbnails on a same page without javascript?

148 Posts

bakalek Reply #1, 18 years, 3 months ago

Hi all,

Is there any way to display both: large image and thumbnails on the same page without using javascript (as in wiki)?
The large picture should change on page refresh.

I’ve tried it with the following calls and i get them both initially how i want, but when i click on a thumbnail i have 2 large images on the same page.

[!MaxiGallery? &pictureTpl=`@FILE:/assets/sniptemplates/maxigallery/picturetpl.html` &display=`pictureview` &css=`assets/sniptemplates/maxigallery/styles.css`!]

[!MaxiGallery? &galleryOuterTpl=`@FILE:/assets/sniptemplates/maxigallery/galleryoutertpl.html` &galleryPictureTpl=`@FILE:/assets/sniptemplates/maxigallery/gallerypicturetpl.html` &css=`assets/sniptemplates/maxigallery/styles.css` !]

Thanks!

Aleks

148 Posts

bakalek Reply #2, 18 years, 3 months ago

Doze, is it even possible with the current version of maxigallery?
What would i need to modify to make it work?

Right now i did it with an iframe for the thumbnails on a same page as a large image but i’d like to have a more elegant solution.

Thanks!

5,888 Posts

Bruno17 Reply #3, 18 years, 3 months ago

you can try this

to show the big image:

<img src="[+phx:get=`showpic`+]"..............

in your gallerypicturetpl:

<a href="[~[*id*]~]&showpic=[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"..............

not tested! does it work?

Bruno

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

148 Posts

bakalek Reply #4, 18 years, 3 months ago

this actually works! Thank you!

The only problem right now is when you get to the page for the first time no large image show up.
Since i dont have phx installed on my modx i created a snippet to generate a large image:

<?php
$pictureURL = $_GET['showpic'];

echo "<img src='".$pictureURL."' border='0'>";
?>

i guess i somehow need to grab the first large image from the gallery folder if ’showpic’ = null

5,888 Posts

Bruno17 Reply #5, 18 years, 3 months ago

you can try this:

<?php
//snippet: get_pic
//parameter: &galid &gtable

$pictureURL = $_GET['showpic'];

if (!isset($_GET['showpic']){
$galid= isset($galid)?$galid:$modx->documentIdentifier;
$gtable = (isset($gtable)) ? $gtable : "maxigallery"; // [ text ]
$orderby = "pos,date";
$offset=0;
$limit = 1;
$path_to_galleries="assets/galleries/"; // [ path ]
$path_to_gal=$path_to_galleries.$galid."/";
//erstes Bild aus Datenbank
$order_direction="ASC";
$rs=$modx->db->select("id,filename", $modx->db->config['table_prefix'].$gtable, "(gal_id='" . $galid . "' AND NOT hide='1')",$orderby.' '.$order_direction, $offset.','.$limit);
$row = $modx->db->getRow($rs);
$firstpic = $path_to_gal.$row['filename'];
$firstpicid = $row['id'];
//letztes Bild aus Datenbank
$order_direction="DESC";
$rs=$modx->db->select("id,filename", $modx->db->config['table_prefix'].$gtable, "(gal_id='" . $galid . "' AND NOT hide='1')",$orderby.' '.$order_direction, $offset.','.$limit);
$row = $modx->db->getRow($rs);
$lastpic = $path_to_gal.$row['filename'];
$lastpicid = $row['id'];
//set Placeholder
$modx->setPlaceholder( 'firstpic' , $firstpic );
$modx->setPlaceholder( 'lastpic' , $lastpic );
$modx->setPlaceholder( 'firstpicid' , $firstpicid );
$modx->setPlaceholder( 'lastpicid' , $lastpicid );
$pictureURL =$firstpic;
}
return "<img src='".$pictureURL."' border='0'>";
?>

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

148 Posts

bakalek Reply #6, 18 years, 3 months ago

wow, you are the man!

Works like a charm, Thanks!

148 Posts

bakalek Reply #7, 18 years, 3 months ago

Bruno,

is there any way to use picturetpl.html for large images for ’next’, ’previous’ links as well as ’big’ image popup ?

Thanks man!

148 Posts

bakalek Reply #8, 18 years, 3 months ago

ok i did it in a different way.
instead of pulling the large image by picture id from the database i do it for the thumbnails:

<?php
$galid= isset($galid)?$galid:$modx->documentIdentifier;
$gtable = (isset($gtable)) ? $gtable : "maxigallery"; // [ text ]
$orderby = "pos,date";
$offset=0;
$path_to_galleries="assets/galleries/"; // [ path ]
$path_to_gal=$path_to_galleries.$galid."/";
$order_direction="ASC";

$result = $modx->db->select("id,filename", $modx->db->config['table_prefix'].$gtable, "(gal_id='" . $galid . "' AND NOT hide='1')",$orderby.' '.$order_direction, $offset);

if($modx->db->getRecordCount($result) >= 1) {
		$output .= '<div class="thumbscontainer">';
		while( $row = $modx->db->getRow( $result ) ) {
			$output .= '<div class="thumbnail"><a href="[~[*id*]~]?pic='.$row['id'].'"><img src="'.$path_to_gal.'tn_'.$row['filename'].'" border="1" ></a></div>';
		}
		$output .= '</div>';
	}
	else {
		$output = 'There are no records to show.';
	}
	return $output;
?>

and have a large picture viewer on top with the following call:

[!MaxiGallery? &display=`pictureview` !]

this way i have the original maxigallery embed options for the zoomed in picture and can control thumbnail display on the page better.

Thank you Bruno for your help!

13 Posts

vittel Reply #9, 17 years, 11 months ago

Hello, I´m new to Modx and I´m looking for exactly that way to show thumbnails and one big image without javascript.
But I can´t get that to work. Could someone explain that in a more detailed way?

13 Posts

vittel Reply #10, 17 years, 11 months ago

tried a lot but still no result.
the code in bakaleks last post is a snippet, right? that snippet shows the thumbnails.?
how does the call for that snippet look like?
and what´s in the tpl files?

What I like to do is:
_____
| |
|_____| an image that is changed by thumbnails
______ the title and description of the picture showed above

|_| |_| |_| tumbnails to change the bigger img above

I´m appreciate about any advice.