skriker

IImage Gallery – custom patterns

author - malyfred / 2005-03-30

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&amp;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&amp;ig_img_title=%title" onClick="JavaScript:window.open('http://addressOfYourSite/gallery.php?ig_img_src=%src&amp;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.

Comments

  1. Dydric 2005-04-03 / 9.28 pm

    no succes for me… I tried everything but get a “page is not found”-error….

  2. malyfred 2005-04-03 / 10.35 pm

    >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?

  3. Dydric 2005-04-04 / 11.31 am

    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!!!

  4. Phisch 2005-04-05 / 9.00 pm

    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.

  5. malyfred 2005-04-06 / 4.20 am

    >Phish You can – just use alt or title for the description and then print it out as is shown in example.

  6. Dydric 2005-04-18 / 9.09 pm

    is there a possibility to get a next and previous button on my gallery template? (and comments, is there a solution for also?)

  7. IImage Gallery | skriker 2005-04-20 / 12.45 am

    […] ectory. (see: administration> options> miscellaneous) Don’t forget to look at: Custom pattern examples for IImage Gallery

    (WordPress) […]

  8. malyfred 2005-04-20 / 12.49 am

    >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.

  9. Noémio Ramos 2005-04-27 / 12.00 am

    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?

  10. jason 2005-04-30 / 1.33 am

    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.

  11. jason 2005-04-30 / 1.37 am

    by “description” in the comment above, i meant “title”. also, how can i get the title to display under the thumbnails?

  12. markus 2005-05-13 / 11.38 am

    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

  13. markus 2005-05-13 / 11.39 am

    Sorry, forgot to say:
    The iimage Gallery over all is GREAT – and many thanks for it!
    Markus

  14. Maza 2005-05-14 / 12.59 pm

    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/

  15. Anonymous 2005-05-14 / 1.43 pm

    Image Gallery

    Yesterdy I have implemented a WordPress plugin ……

  16. station 2005-05-23 / 11.46 am

    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 = '';

  17. station 2005-05-23 / 11.51 am

    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.

  18. malyfred 2005-05-23 / 1.05 pm

    >ALL if you want to post some code here – you have to replace < by &lt; and > by &gt;

  19. malyfred 2005-05-23 / 1.12 pm

    >Markus Then probably nothing:o) Just try if it works.

  20. malyfred 2005-05-23 / 1.13 pm

    >jason hmmm, that looks like a bug:o( I have to fix this encoding/decoding bugs.

  21. malyfred 2005-05-23 / 1.17 pm

    >Maza You have to call function iimage_gallery_create_thumbs to create thumbs once and then iimage_gallery_create_gallery anytime/anywhere you want to have a gallery. I don’t think this could work in the sidebar:o(

  22. A.D. 2005-06-04 / 4.45 pm

    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!

  23. A.D. 2005-06-04 / 4.47 pm

    Malyfred, sorry for the mess my comment did to Your page.
    Can you fix it?

  24. malyfred 2005-06-04 / 8.21 pm

    >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.

  25. A.D. 2005-06-04 / 9.09 pm

    > 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.
    :)

  26. morph 2005-06-07 / 4.45 am

    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!

  27. A.D. 2005-06-07 / 8.13 am

    > Morph: does error comes up in new window (with full picture) or in the window, that calls popup?

  28. A.D. 2005-06-07 / 10.57 am

    > 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.moveTo line.

  29. mugget 2005-06-08 / 4.19 am

    i tried your instructions to make the full size image open in the new window:

    [you have to use &lt; for < and &gt; 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 59

    line 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. :)

  30. malyfred 2005-06-08 / 11.37 am

    >mugget oh yes – backslashes disappeared during some editing magic:) Try it now.

  31. mugget 2005-06-09 / 6.04 am

    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…

  32. A.D. 2005-06-09 / 5.34 pm

    > Mugget, take JS file and description here:
    http://ad.pri.ee/dl/files/IImage_Gallery_Hack.zip

  33. Netlex News » Blog Archive » Test 2005-07-22 / 12.27 pm

    […] Test For testing IImage Gallery WordPress plugin : IImage Gallery Image gallery custom patterns Fabia Borges – Carnaval de Rio 2005 – Tijuca […]

  34. Steve 2005-07-25 / 7.47 am

    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?

  35. A.D. 2005-07-25 / 1.21 pm

    > 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.

  36. A.D. 2005-07-25 / 1.46 pm

    Just posted new .zip with all my files (including .php):
    http://ad.pri.ee/dl/files/IImage_Gallery_Hack.zip

    You’re welcome!
    :-)

  37. Steve 2005-07-26 / 12.11 am

    that worked. I had the code in a few wrong places, so the file will probably help other people as well. Thanks so much.

  38. Steve 2005-08-08 / 9.49 am

    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.

  39. A.D. 2005-08-14 / 7.21 pm

    > 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!

  40. Liyoung 2005-08-16 / 6.02 pm

    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!

  41. malyfred 2005-08-16 / 8.36 pm

    Liyoung> It’s not a big work at all, IIG is perfectly ready for this modification.

    1)You have a $ig_gallery array 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!:)

  42. indigo 2005-09-12 / 9.00 pm

    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

  43. malyfred 2005-09-12 / 10.26 pm

    indigo> Have you followed instructions on this page: IImage Gallery? Have you created gallery in the post?

  44. indigo 2005-09-13 / 5.27 am

    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?

  45. malyfred 2005-09-13 / 10.27 am

    indigo> I’ve checked your site and everything seems to work exactly as it is supposed. Did you expect diferent behaviour?

  46. indigo 2005-09-13 / 10.07 pm

    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.

  47. IImage Gallery | skriker 2005-11-03 / 12.15 am

    […] Don’t forget to look at: Custom pattern examples for IImage Gallery (WordPress) […]

  48. Matt 2005-11-06 / 8.42 am

    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!

  49. Steve 2005-12-23 / 8.37 am

    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?

  50. malyfred 2005-12-23 / 2.35 pm

    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.

  51. Steve 2005-12-25 / 3.19 am

    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.

  52. L 2006-03-05 / 5.10 am

    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).

  53. L 2006-03-05 / 8.02 am

    $ig_img_src

    What does this translate to for IImage Gallery?

  54. Clark 2006-04-18 / 3.30 am

    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”

  55. daniel 2006-05-07 / 11.21 am

    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

  56. jamie 2006-07-19 / 8.04 pm

    i can’t find it…
    :)
    j

  57. Baudry 2008-03-30 / 2.36 am

    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

Sorry, the comment form is closed at this time.

© 2004 - 2024 malyfred