[archived] txp->gallery

Tek · 2004-06-21 17:36:05

I would like to try MZ’s photo gallery plugin but….

“install plugin” what does that mean??????

k, calmer now. having some cheese with my whine.

I downloaded the photogallery zip.

Does it matter what directory is installed on my site? Do I need to install it in the textpattern directory?
Then once I install it, I have to upload the plugin from the admin page, right?

Then I’m not sure what to do.

<b>[edited to say]</b> Okay. do I need to create a template for my photos?

Any help is appreciated.

Last edited by Tek (2004-06-21 17:39:39)

tinyfly · 2004-06-21 18:13:11

to install:

Download the zip file to your desktop
Unzip the files
go to your Textpattern admin > plugins page
click the “choose” button and find the file “gallery.plugin” that you unzipped.
click the “install” plugin.
in the “Active” column make sure you click it so it says “yes”

To use the plugin use this tag <code><txp:gallery /></code> this will use all images that you have uploaded through Textpattern. There are many other attributes that Textpattern can take look through this thread and also check out Max’s site

Last edited by tinyfly (2004-06-21 18:13:35)

Damelon · 2004-07-03 15:46:10

Max, currently I am putting together the site for an art group that my wife’s grandfather is part. I’m trying to make a go of it using your plugin which I think can do the job, but (there’s always a but to these kind of comments, isn’t there?) there are a couple of things I would like to know can/will be cured before I invest myself in building the image functions around this.

Issue A.

The first thing is the ‘break’ tag just doesn’t seem to work. Here is what I’m using in the page : <txp:gallery category="bernard" wraptag="ul" break="li" usethumbs="1" />

It produces code that looks so :

<ul><a id="txpg1_17" onclick="return showPic(this,'gallery_image1','gallery_desc1')" href="/images/17.jpg" title=""><img src="/images/17t.jpg" alt="016 bernard 01" title="016 bernard-r 01" /> </a>li<a id="txpg1_18"... </ul>

I have clipped down that example to one full image link and the start of the next. No <li> tags, but there is a nice little ‘li’ in between the ending </a> tag and the next beginning link. Okay, so I have figured out how to get the <li> tags, but as I think you not only intended the tags to function but can get the tags to function I will merely detail what I did to get the thumbnails to display correctly.

1. In the plugin on line 82, insert an <li> tag where I have put it in this example :

$temp = '<li>[a id="txpg'.$txpGalleryCounter.'_'.$id.'" onclick="return

Caution : I changed the opening < bracket in above line to [ to allow this to not break in Textile!

2. line 88, insert an </li> after the closing </a> tag like so :

$temp .= '</a></li>';

3. use, but put nothing in the break attibute of the tag in the page that calls to the plugin, like so :

<txp:gallery category="bernard-r" wraptag="ul" break="" usethumbs="1" />

By doing those things a neat properly structured unordered list is created. Pretty much if you do anything else, it seems to break. At first I thought I would get away with only adding the opening <li> on line 82, and having the break tag be </li> but that doesn’t work because the plugin apparently doesn’t put one after the last thumbnail.

You can see my un-styled test page of what I’ve done here :

http://passerelledesarts.com/rene-bernard/

Issue B.

Can we have the ability to apply a CSS controlled wrapping to the thumbnails? I’ve figured out how to hack the code to wrap/control the caption and the main image. Even instructions about how to add some further structure would be very welcome.

***

Finally, maybe in the above examples I missed something. That is always possible. Maybe I just made a huge and stupid error in my thinking or execution. If I did, I’ll appreciate having it pointed out. either way, I’m not criticizing. I would have never managed this and I appreciate that you have.

Last edited by Damelon (2004-07-04 13:22:12)

Turbo-G · 2004-07-22 23:37:03

I posted a feature request, but this could be done with a possible new version of Gallery: Have a look:

http://forum.textpattern.com/viewtopic.php?id=646

mistersugar · 2004-07-24 02:23:20

> elmar wrote:

> Here is a samle of the tags from my site:

>img id=“img” src=”/images/29.jpg”
div style=“text-align:center” txp:gallery category=“chichihuistan” wraptag=“div” break=” “ imageID=“img” descID=“desc” usethumbs=1 /div br=“clearboth” /

>span id=“desc”>Sabine’s horse, Rancho Chichi /span (I can’t get the code to work with Textile here…)

>This puts the thumbnails under the picture and then a caption. You will need to play with the css to get you thumbnails on the side, a float:left in the div should do it. Import is to identify the image and caption and then use imageID and descID to replace them. Good luck!

<del>I cannot seem to figure this out. Anyone able to show this code with the < and > in the right spots? I’d like to have my gallery with the thumbnails below the pic, just like elmar so nicely does on his site. Thanks. </del>

[edit 3 of 3] Trial-and-error got me through this. Thanks, elmar, for your code.

Last edited by mistersugar (2004-07-24 03:24:53)

jmrhoades · 2004-08-10 22:16:56

Hey, please file this one under: Yet Another Plea for the Previous | Next link functionality.

This plugin is truly the bomb, but for my purposes, displaying a list image links above the image in not an attractive or viable option. I absolutely need a previous image link and a next image link functionality to make use of this wonderful plugin.

This plugin, to me, is unique because:

-You can associate multiple images to one article. That’s huge and unique among other photo gallery plugins as far as I can tell. If someone out there knows of a similar plugin, please let me know.

-The user can click through the images without having to reload the page. That’s fantastic as well. This feature reinforces a pleasant user experience where one page contains one article and a bunch of images that can be viewed without having to leave the page or constantly refresh it.

So for me, the only thing missing is the Prev and Next links. After digging around your code, I came to the conclusion that the best thing to use is the $rs array returned towards the top of your script. So here’s my question (finally), could I use the $rs array in the javascript to provide the Previous and Next link functionality?

Basically, I was thinking it would go something like this:
-create var for total number of images
-create var for current image number being displayed
(Previous or Next link is clicked)
-check if next or previous link was clicked
-if next •increment image number by one •if image number isn’t greater than total images number -continue •else -image number = 1
-if previous •decrement image number by one •if image number isn’t less than1 -continue •else -image number = total images number
-url=imagesURLArray[imageNumber]
-description= descriptionArray[imageNumber]
-show image

That’s the logic as far as I can see it. I’m just unable to code it up. How do you integrate the php generated arrays with the javascript? Is this even the best way to go about it?

Thanks for all your hard work. I understand you gotta put food on the table, so get back whenever your free. Thanks again!

-justin

Turbo-G · 2004-08-11 06:31:30

justin,

that’s exactly my idea of a perfect gallery-plugin on a html/javascript-basis! Go learn some coding ;-)

/Gerrit.

jmrhoades · 2004-08-21 22:57:18

well, looks like I was able to hack my way to my goal:

jmrhoades.com

check out the picture viewer. i’ll be happy to share the code if anyone is interested. it ain’t pretty.

Turbo-G · 2004-08-21 23:01:52

I would love to get the code! It doesn’t need to be pretty, it seems to works alright!! Cool! Thank you! Post it here or send it via e-Mail!

jmrhoades · 2004-08-21 23:07:28

alright, you asked for it…(please, use with caution, there is nothing plug-n-play about this, it’s highly customized for my own site’s needs):

<pre> //——————————————————————————————————————- // Put together by Max Ziebell under GPL // (blog) http://flashrocket.worldoptimizer.com //——————————————————————————————————————- // contribution by Jeremy Keith // checkout his… // (blog) http://adactio.com and his music // (music) http://www.saltercane.com/ ) // (gallery) http://www.alistapart.com/articles/imagegallery/ //——————————————————————————————————————- function gallery($atts) {

$version = “1.21”;

global $pretext,$img_dir; $pfr = $pretext[‘pfr’]; if (is_array($atts)) extract($atts);

//comment this line if you want to prevent gallery to autoload by default $autoload = (empty($autoload)) ? 0 : $autoload;// <————- if (isset($autoload)) $autoload=intval($autoload); if (!isset($break)) $break=’<br />’;

$type = (empty($type)) ? ‘JSPlaceholder’ : $type; $sortby = (empty($sortby)) ? ‘date’ : $sortby; $sortdir = (empty($sortdir)) ? ‘asc’ : $sortdir;

$q = array( “select * from txp_image”, (!empty($author) or !empty($category)) ? ‘where’ : ‘’, (!empty($author)) ? “author=’$author’” : ‘’, (!empty($author) and !empty($category)) ? “and” : ‘’, (!empty($category)) ? “category=’$category’” : ‘’, “order by”, $sortby, $sortdir, (!empty($limit)) ? “limit $limit” : ‘’ );

//jmrhoades additions $out[] = ‘<!— END WORDS —>’; $out[] = ‘</div>’; $out[] = ‘<!— BEGIN IMAGES —>’; $out[] = ‘<div id=“images”>’;

$rs = getRows(join(’ ‘,$q)); if ($rs) { if ($autoload>count($rs) and isset($autoload)) $autoload = count($rs); switch (strtolower($type)) { case “jsplaceholder”: //just generate JS once global $txpGalleryCounter; if (!isset($txpGalleryCounter)) { $script[] = ‘’; $script[] = ‘<!— gallery ‘.$version.’ functions —>’; $script[] = ‘<script type=“text/javascript” language=“javascript”>’; $script[] = ‘<!—’; $script[] = ‘ var imageArray= new Array();’; $script[] = ‘ var captionArray= new Array();’; $script[] = ‘ function push(array, item) {‘; $script[] = ‘ array[array.length] = item;’; $script[] = ‘ };’; foreach ($rs as $a){ extract($a); $url = $pfr.$img_dir.’/’.$id.$ext; $script[] = “push(imageArray, ‘$url’);”; $caption = htmlentities((($label==“caption”) ? $caption:$alt)); $caption = htmlentities($caption); $script[] = “push(captionArray, ‘$caption’);”; }

$script[] = ‘ var numberOfImages=’.count($rs); $script[] = ‘ var currentImageNum = 0;’; $script[] = ‘ function showNewPic (direction) {‘; $script[] = ‘ if (direction==1){‘; $script[] = ‘ currentImageNum++;’; $script[] = ‘ if (currentImageNum>numberOfImages-1){‘; $script[] = ‘ currentImageNum=0;};’; $script[] = ‘ } else {‘; $script[] = ‘ currentImageNum—;’; $script[] = ‘ if (currentImageNum<0){‘; $script[] = ‘ currentImageNum=numberOfImages-1;};’; $script[] = ‘ }’; $script[] = ‘ document.getElementById(“galleryimage”).src = imageArray[currentImageNum];’; $script[] = ‘ document.getElementById(“gallerycaption”).childNodes⁰.nodeValue = captionArray[currentImageNum];’; $script[] = ‘ document.getElementById(“imagecount”).childNodes⁰.nodeValue = currentImageNum+1+” of “+numberOfImages;’; $script[] = ‘ return false;’; $script[] = ‘ }’; $script[] = ‘—>’; $script[] = ‘</script>’; // run level support if (isset($runlevel) and function_exists(“run”)){ set(“galleryjavascript”,join(“\n”,$script)); } else { $out = array_merge($out,$script); } }

//inc galleryCounter $txpGalleryCounter++; $default_id_desc = (isset($descID)) ? $descID : ‘gallery_desc’.$txpGalleryCounter; $default_id_image = (isset($imageID)) ? $imageID : ‘gallery_image’.$txpGalleryCounter;

//generate list foreach($rs as $a) { extract($a); $url = $pfr.$img_dir.’/’.$id.$ext; $temp = ‘’; $title = ‘’; $temp .= ‘’; $temp .= ‘’; $list[] = $temp; }

//jmrhoades additions if (count($rs)>1){ $out[] = ‘<ul>’; $out[] = ‘<li><a onclick=“return showNewPic(0)” href=”#” title=“Previous Image” id=“prev”>previous image</a></li>’; $out[] = ‘<li><a onclick=“return showNewPic(1)” href=”#” title=“Next Image” id=“next”>next image</a></li>’; $out[] = ‘</ul>’; $out[] = ‘<span id=“imagecount”> </span>’; $out[] = ‘<div class=“clear”> </div>’; }

//generate autoload if (isset($autoload)) { $out[] = ‘<!— gallery autoload=’.$autoload.’ —>’; $out[] = ‘<script type=“text/javascript” language=“javascript”>’; $out[] = ‘<!—’; $out[] = ‘ setTimeout(\‘document.getElementById(“galleryimage”).src = imageArray[currentImageNum];\’,500);’; $out[] = ‘ setTimeout(\‘document.getElementById(“gallerycaption”).childNodes⁰.nodeValue = captionArray[currentImageNum];\’,500);’; $out[] = ‘ setTimeout(\‘document.getElementById(“imagecount”).childNodes⁰.nodeValue = currentImageNum+1+” of “+numberOfImages;\’,500);’; $out[] = ‘—>’; $out[] = ‘</script>’; } //insert list $temp = ‘’; $out[] = (!empty($wraptag)) ? tag($temp,$wraptag) : $temp; //insert placeholders if needed if (!isset($imageID)) { $out[]=’<div id=“image”>’; $out[] = ‘<img id=“galleryimage” alt=” “ src=”“ width=“490” height=“368”/>’; $out[]=’</div>’; } if (!isset($descID)) { $out[] = ‘<p class=“caption” id=“gallerycaption”> </p>’; $out[]= ‘<!— END IMAGES —></div><div class=“clear”> </div>’; } break; } return (is_array($list)) ? join(n,$out) : ‘<b>no images found…</b>’; } return ‘’; }
</pre>

Textpattern CMS

Textpattern CMS support forum

#25 2004-06-21 17:36:05

Re: [archived] txp->gallery

#26 2004-06-21 18:13:11

Re: [archived] txp->gallery

#27 2004-07-03 15:46:10

Re: [archived] txp->gallery

Issue A.

Issue B.

#28 2004-07-22 23:37:03

Re: [archived] txp->gallery

#29 2004-07-24 02:23:20

Re: [archived] txp->gallery

#30 2004-08-10 22:16:56

Re: [archived] txp->gallery

#31 2004-08-11 06:31:30

Re: [archived] txp->gallery

#32 2004-08-21 22:57:18

Re: [archived] txp->gallery

#33 2004-08-21 23:01:52

Re: [archived] txp->gallery

#34 2004-08-21 23:07:28

Re: [archived] txp->gallery

Board footer