IImage Gallery – custom patterns
The basic version of IImage Gallery offers only simple custom patterns for generating code. But you can define your own patterns and improve your galleries as you need.
Open an image in the new window
To open full-size image in new window – try something like this:
$ig_before_each = '<a href="%src" onClick="JavaScript:window.open('%src', '%title', 'scrollbars=yes'); return false" class="gallery_item" target="_blank">';
If user has enabled JavaScript – pop-up window without scrollbars appears when he clicks on the image. User without JavaScript support gets new standard browser window with image. Please note that if you want to have your site XHTML valid you have to remove target="_blank". It seems that there is no "valid" way how to open a new window in XHTML without support of JavaScript at the moment .
Template page
Example of simplest template page:
<html>
<head>
<title><?PHP echo $ig_img_title;?></title>
</head>
<body>
<?PHP
echo "<img src="$ig_img_src" alt="$ig_img_alt" title="$ig_img_title" /><br />";
echo "<strong>$ig_img_title</strong>";
?>
</body>
</html>
Save this example as gallery.php to the root directory of your WP and then modify $ig_before_each:
$ig_before_each = '<a href="http://addressOfYourSite/gallery.php?ig_img_src=%src&ig_img_title=%title" class="gallery_item">';
Template page in the new window
To open new browser window with template page you need to combine both examples:
$ig_before_each = '<a href="http://addressOfYourSite/gallery.php?ig_img_src=%src&ig_img_title=%title" onClick="JavaScript:window.open('http://addressOfYourSite/gallery.php?ig_img_src=%src&ig_img_title=%title', '%title', 'scrollbars=yes'); return false" class="gallery_item" target="_blank">';
Open an image in the new CENTRED window
This example is for a bit advaced users and was provided by A.D.
1. Replace default $ig_before_each with the following:
$ig_before_each = '<a href="#" onClick="openWithSelfMain('%src', '%title', '%width', '%height'); return false" class="gallery_item">';
2. Add commented lines to function "iimage_gallery_create_gallery($text){}" like this:
……….. here: ……………….
$ig_patterns[0] = '/\%src/i';
$ig_patterns[1] = '/\%alt/i';
$ig_patterns[2] = '/\%title/i';
$ig_patterns[3] = '/\%tsrc/i';
/* A.D.'s hack for open-new-imagesized-window */
$ig_patterns[4] = '/\%width/i';
$ig_patterns[5] = '/\%height/i';
/* end A.D.'s hack */
………. and here: …………….
$title = ' ';
$src = $abs_path .md5($matches[$i][1]) .strrchr($matches[$i][1], '.');
/* A.D.'s hack for open-new-imagesized-window */
$im_attr = getimagesize($matches[$i][1]);
$im_width = $im_attr[0];
$im_height = $im_attr[1];
/* end A.D.'s hack */
if(preg_match("/.*?alt="([^"]*)".*?/i",$matches[$i][0],$bar)){
…….. and at last here: ……….
//unset($ip_replacement);
$ig_replacement = array(0 => $matches[$i][1], 1=>$alt, 2=>$title, 3=>$src, 4=>$im_width, 5=>$im_height);
….
3. Create file "yourScript.js" with the following code and put it to Your theme's dir:
function openWithSelfMain(url,name,width,height) {
var options = "width=" + width + ",height=" + height + "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no";
newWindow = window.open(”,”,options);
newWindow.document.open();
newWindow.document.write('<html><title>'+name+'</title><body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onblur="self.close();" onclick="self.close();"><img src="'+url+'" alt="'+name+'" title="'+name+'"></body></html>');
window.self.name = "Picture";
newWindow.moveTo(((screen.availWidth/2)-(width/2)),((screen.availHeight/2)-(height/2)));
newWindow.focus();
}
4. Include following JS code in your theme's header.php before </head>:
<script language="JavaScript" src="<?php bloginfo('template_directory'); ?>/yourScript.js" type="text/javascript"></script>
5. Create Your gallery.
Full-size image will open centered in new fullimage-sized window.
Window will close "onClick" in Internet Explorer.
Window will close "onClick" or "onBlur" in Firefox.
Kommentarer
Beklagar, kommentarsfunktionen är inaktiverad för närvarande.
Dydric 3. 4. 2005 / 21.28
no succes for me… I tried everything but get a ”page is not found”-error….
malyfred 3. 4. 2005 / 22.35
>Dydric I’ve tested all these examples and it should work everywhere and if you get ”page is not found” error – there must be some obvious mistake in the address, no?
Dydric 4. 4. 2005 / 11.31
ok… i tried the whole night and yes i discovered my fault… i placed gallery.php not in the root, but in my template-map.. sorry!
thx for the great script! It kicks ass!!!
Phisch 5. 4. 2005 / 21.00
Great plug in! Only I wish you could add the description under the photo when it shows on its own page after you click on the thumbnail.
malyfred 6. 4. 2005 / 4.20
>Phish You can – just use
altortitlefor the description and then print it out as is shown in example.Dydric 18. 4. 2005 / 21.09
is there a possibility to get a next and previous button on my gallery template? (and comments, is there a solution for also?)
IImage Gallery | skriker 20. 4. 2005 / 0.45
[…] ectory. (see: administration> options> miscellaneous) Don’t forget to look at: Custom pattern examples for IImage Gallery
(WordPress) […]
malyfred 20. 4. 2005 / 0.49
>Dydric No solution for next&previous button now, sorry:o( I’m working on several different things at the same time now and this is one of them. But I have no idea when it will be finished.
Noémio Ramos 27. 4. 2005 / 0.00
As you can see in my site, there is an elegant solution
to view images, while cliking in the thumbnails.
this only required some modifications
$ig_before_each = '%title%alt<a href="%src">';
and in iimage_gallery_create_gallery
//global $lista_imgs; //all the images for prev-next
static $gcount = 0; //static for multiples posts in page
$ig_patterns[4] = '/\%width/i';
$ig_patterns[5] = '/\%height/i';
$ig_patterns[6] = '/\%ecran/i';
$ecgallery = "ecran".$gcount++;
for ($i ...
//$lista_imgs[$i] = $matches[$i][1]; //for prev-next
//echo $lista_imgs[ $i].' ';
$size = getimagesize($matches[$i][1]);
$width = $size[0];
$height = $size[1];
//unset($ip_replacement);
$ig_replacement = array( 0=>$matches[$i][1], 1=>$alt, 2=>$title, 3=>$src, 4=>$width, 5=>$height, 6=>$ecgallery);
} //end for
$line = $ingallery_items.$ig_after.''.$foo[2];
thats all.
And, of course, the javascript you can capture in the
source of the header.
Can i see this optimized in php in future?
jason 30. 4. 2005 / 1.33
if i am using the javascript / template code at the top of this page, i cant get the description to be more than 1 word without breaking the jscript (it puts spaces in the URL which causes problems). any way around this? i dont know anything about php and am kinda learning as i go. thanks.
jason 30. 4. 2005 / 1.37
by ”description” in the comment above, i meant ”title”. also, how can i get the title to display under the thumbnails?
markus 13. 5. 2005 / 11.38
Hi,
Hmmm, but how this works in praxis??
I created the simple template page, saved it into the root and then modified the
$ig_before_each
as said above.
But what then?? What for is this template??
Sorry for such a novice question, but the simple patterns (without template) I could create, but I wonder, how I can make use of the template!
Thanks
Markus
markus 13. 5. 2005 / 11.39
Sorry, forgot to say:
The iimage Gallery over all is GREAT – and many thanks for it!
Markus
Maza 14. 5. 2005 / 12.59
Hello Malyfred, Thanks for developing IImage gallery. I have implemented it in several post along with a static page with some css styling and it works just perfect. But my question is these : is there any posibility to include the gallery in a static area of the front page i.e. the side bar (menu) ? I’ve tried a lot but I see no way out. Perhaps you have any suggestions… Greetings Maza, http://www.mazalien.nl/weblog/
Anonym 14. 5. 2005 / 13.43
Image Gallery
Yesterdy I have implemented a WordPress plugin ……
station 23. 5. 2005 / 11.46
I wanted to put my full size image page template in my theme folder so, here’s an example of the custom code I’m useing at the moment in Iimage browser.
$tem_url = get_bloginfo('template_url');
$ib_custom_code_thumb = '';
station 23. 5. 2005 / 11.51
well, ok. so the code got cut, but basically I’ve used the custom code suggested at the first of this post and added the template url so that I could keep the pop up template in my themes folder. I also made sure that the popup template was basically a copy of the my_theme/index.php with the includes for header and footer.
malyfred 23. 5. 2005 / 13.05
>ALL if you want to post some code here – you have to replace < by < and > by >
malyfred 23. 5. 2005 / 13.12
>Markus Then probably nothing:o) Just try if it works.
malyfred 23. 5. 2005 / 13.13
>jason hmmm, that looks like a bug:o( I have to fix this encoding/decoding bugs.
malyfred 23. 5. 2005 / 13.17
>Maza You have to call function
iimage_gallery_create_thumbsto create thumbs once and theniimage_gallery_create_galleryanytime/anywhere you want to have a gallery. I don’t think this could work in the sidebar:o(A.D. 4. 6. 2005 / 16.45
Another solution to open full images centered in new window (similar to Noemio Ramos’s, but uses JavaScript to create new window :-) ):
[code is now part of the post – malyfred]
Thanks for the Great Plugin!
A.D. 4. 6. 2005 / 16.47
Malyfred, sorry for the mess my comment did to Your page.
Can you fix it?
malyfred 4. 6. 2005 / 20.21
>A.D. could check the code please if everything is ok? Or send me your code by e-mail and I’ll add it to the post.
A.D. 4. 6. 2005 / 21.09
> malyfred, pls take the code from here (didn’t found Your e-mail anywhere): http://ad.pri.ee/dl/files/IImage_Gallery_Hack.zip
and post the way you like it, if you like it.
It would be my pleasure to help.
:)
morph 7. 6. 2005 / 4.45
I’ve implemented the code Open an image in the new CENTRED window, but for some reason, IE throws Error: Expected ’)’ at Line 288 and Line 313. I checked iimage_gallery.php at those lines, but they shouldn’t have any problems. Firefox doesn’t have a problem with the code at all, and JS COnsole doesn’t show a thing. It works very well, just that when opening the page, error comes up. Any help would be appreciated!
A.D. 7. 6. 2005 / 8.13
> Morph: does error comes up in new window (with full picture) or in the window, that calls popup?
A.D. 7. 6. 2005 / 10.57
> Morph, my own JS file popup.js is now included in archive: http://ad.pri.ee/dl/files/IImage_Gallery_Hack.zip
The only thing i corrected there is ”;” at the end of the
newWindow.moveToline.mugget 8. 6. 2005 / 4.19
i tried your instructions to make the full size image open in the new window:
[you have to use < for < and > for > if you want to post some code here - malyfred]– but i get this error:
Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/mugget/public_html/wp-content/plugins/iimage-gallery.php on line 59line 59 is that line where i pasted in your example…
i’m a novice at all this… i thought that to have JavaScript there needed to be a .js file?
well thanks for the great iimage-gallery plug-in! hoping to get some help getting this all tweaked now. :)
malyfred 8. 6. 2005 / 11.37
>mugget oh yes – backslashes disappeared during some editing magic:) Try it now.
mugget 9. 6. 2005 / 6.04
aahhh!! sorry – it messed up again – i don’t know how to post code, so i’ll just say that i used the very first example on this page of how to open the images in a new window – and i got a parse error. any ideas what went wrong?
ps – sorry for my jumbled comments here messing things up, feel free to delete the one above this…
A.D. 9. 6. 2005 / 17.34
> Mugget, take JS file and description here:
http://ad.pri.ee/dl/files/IImage_Gallery_Hack.zip
Netlex News » Blog Archive » Test 22. 7. 2005 / 12.27
[…] Test For testing IImage Gallery WordPress plugin : IImage Gallery Image gallery custom patterns Fabia Borges – Carnaval de Rio 2005 – Tijuca […]
Steve 25. 7. 2005 / 7.47
I’ve been working on A.D.’s instructions for a few hours. I’ve gotten rid of all the errors I was getting, so I think everything is in the right place in the code. However, the gallery doesn’t open in the new window. It behaves as if the code wasn’t there at all. I’m baffled.
Would it be possible to post a .php file with A.D.’s changes correctly adapted to remove that variable? Then we’d just have to insert the image-gallery.php file and insert the java script? What do you think?
A.D. 25. 7. 2005 / 13.21
> Steve, I’d like to share my own .php file, but I’m araid I’ve made to much customization to it. :)
Most of the dialogs inside it now in russian. If you like, send me your .php file and I’ll insert the code into right place.
A.D. 25. 7. 2005 / 13.46
Just posted new .zip with all my files (including .php):
http://ad.pri.ee/dl/files/IImage_Gallery_Hack.zip
You’re welcome!
:-)
Steve 26. 7. 2005 / 0.11
that worked. I had the code in a few wrong places, so the file will probably help other people as well. Thanks so much.
Steve 8. 8. 2005 / 9.49
Hey A.D., malyfred, I’m using A.D.’s hack and it’s great. However, I am noticing that the center crop option isn’t working for me. I select it true, but it still chooses to crop from the left edge. Any ideas?
Also, A.D., in that .zip file you have posted above the error messages are in russian. Not that I mind…
Thanks again.
A.D. 14. 8. 2005 / 19.21
> Steve (and all the others, who downloaded my files)!
Thanks for your interest.
I’m really sorry for russian messages in source. But… I’m way too lazy to restore original messages. :)
I have posted my .php file just for example. It is totally identic to Malyfred’s one, except of those lines of code, that only was added (not changed) by me.
P.S. About the ”crop” option. Do you have access to web server’s error log? Look up there. I think the cause is some mistyping in file source. If so – error log definitely helps. Anyway, lookin’ into server’s logs is very helpful. You’ll find alot of interesting information there.
:)
Cheers!
Liyoung 16. 8. 2005 / 18.02
malyfred:
THANK YOU for your gallery, the stand alone windows almost replace my internet photo album!
but still I have two wishes…
1. This is my gallery:
http://kuso.cc/5ij
(I fixed the navigation bar by table)
I wish I can have 5 thumbnails only, with the current-viewing photo’s thumb in middle,..
2. (less important)
This is the entry of my gallery:
http://kuso.cc/5in
I wish it can display 6 photoes only in the entry, while other photoes should be seen only in the stand alone gallery..
I hope I can do it by myself by altering your PHP code(learning now), but it seems a big work…I’ll be so gracious if you have a solution! ahoj!
malyfred 16. 8. 2005 / 20.36
Liyoung> It’s not a big work at all, IIG is perfectly ready for this modification.
1)You have a
$ig_galleryarray in the template and index of selected image is in$idi. To choose two images before and after is a piece of cake:)2)Find this line in
iimage-gallery.php:for($i=0;$i<preg_match_all("/<img[^>]+src="([^"]+)"[^>]*>/i",$current_gallery.$foo[1],$matches,PREG_SET_ORDER);$i++)and replace it with:
for($i=0;$i<=min(6, preg_match_all("/<img[^>]+src="([^"]+)"[^>]*>/i",$current_gallery.$foo[1],$matches,PREG_SET_ORDER));$i++)That’s it!:)
indigo 12. 9. 2005 / 21.00
I have a question,
where do I install the iimage-gallery file ? in the plugins directory rigth?
I activated it, and when I upload files, I don’t get the images on the site.
am I doing something wrong?
My WordPress version is 1.5.1.3
malyfred 12. 9. 2005 / 22.26
indigo> Have you followed instructions on this page: IImage Gallery? Have you created gallery in the post?
indigo 13. 9. 2005 / 5.27
malyfred,
I followed instructions,
I even installed the java script which works fine.
In the post, I copy/paste a code from your site
and I get the images on the post.
But when I post one image, with the iimage browser, that image does not show up anywhere in the site, unless
i post and then copy/paste the url from the image i added with the iimagebrowser
Is this how it works? Maybe it is me?
malyfred 13. 9. 2005 / 10.27
indigo> I’ve checked your site and everything seems to work exactly as it is supposed. Did you expect diferent behaviour?
indigo 13. 9. 2005 / 22.07
oh, okay :) Yes…I guess it has to do with the formatting?, I will look into that.
Thanks for your help malyfred. And thanks for the Excellent Plugin, Will post it on the site tonight.
IImage Gallery | skriker 3. 11. 2005 / 0.15
[…] Don’t forget to look at: Custom pattern examples for IImage Gallery (WordPress) […]
Matt 6. 11. 2005 / 8.42
Hey there, it is Matt again. I have (I think) finished with my design for the gallery, if you want to check the finished product (what do you think?), here it is!
Steve 23. 12. 2005 / 8.37
A.D. or Malyfred,
I’ve been using your plugin for a few months and it’s working great. Now I had an idea – I want to combine the template design that has the image on top and a row of thumbnails on the bottom with the pop-up feature. So, you click on an image and the window is sized with some extra room at the bottom for the horizontally scrollable thumbnails. it would be tight and beautiful.
I tried to implement it myself, but can’t figure out how to get the pop-up window to appear a set amount of pixels larger than the image. Does this make sense. As anyone interested in working with me to get this to work?
malyfred 23. 12. 2005 / 14.35
Steve:: Use A.D.’s hack and change:
var options = "width=" + width + ",height=" + (height+300) + "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no";
where ”300” stands for value that should be added to the height of the image. I haven’t tested it but it should work.
Steve 25. 12. 2005 / 3.19
Hmmm. No luck. The template doesn’t appear and the height seems to be too tall, no matter what figure plug in for (height+X). For what it’s worth, I am using A.D.’s version that he posted in comment #36.
L 5. 3. 2006 / 5.10
I can’t get my custom template settings to work for IImage Browser. I can’t find ib_before_each to add that code, either. I ignored that part. As far as I can tell, I have to include the code from iimage-browser.php, but it didn’t work (of course, I didn’t include the template in that file).
L 5. 3. 2006 / 8.02
$ig_img_src
What does this translate to for IImage Gallery?
Clark 18. 4. 2006 / 3.30
Can someone rewrite the above instructions for dummies. Example: ’In x_y_z.php at line ## replace ”asdf” with ”zxcv”’
Replacing the code in line 64 after ”$ig_before_each” in iimage-gallery.php with the suggested code ”’<a href=”%src”…>’;” nets this error: ”Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING in …iimage-gallery.php on line 64”
daniel 7. 5. 2006 / 11.21
i hope to create an albumn in my own website,but i download your coad can not found your upload file.now i have already create the upload.asp file to upload the picture to my database,so now i want to show the picture in my website and add some comment with each picture.how can i achieve this function with your software.please help me,thank you
jamie 19. 7. 2006 / 20.04
i can’t find it…
:)
j
Baudry 30. 3. 2008 / 2.36
Hello I ’m not specialist on informatic but i would like to make on my website page like this :http://www.abstractmachine.net/thesis/randomizer.php
I don’t know if it was possible with your code i would like to make a similar but images are picked on post archives or categories and composed the page and when you click on you can see article i think it ’s very interesting! I’m talking with the author about his website.can you said to me if it ’s possible to make something like that with your image gallery plugin.
Thanks a lot, Olivier from France