Thread Rating:
  • 3 Vote(s) - 3.67 Average
  • 1
  • 2
  • 3
  • 4
  • 5
I18N Gallery
(2013-11-20, 10:29:29)stryker Wrote: I am using bootstrap 3 and just want to CENTER the whole gallery (Prettyphoto) inside the parent container / div / column. I've tried for ages to change the relevant CSS styles but stubbornly the gallery always seem to float / align left.

You just have to make your own rules more specific than the generated rules, for CSS rule precedence see e.g. http://www.vanseodesign.com/css/css-spec...-cascaade/.

It helps if you have multiple IDs in your template e.g. <body id="body"> <div id="content"> and then specify the rule as #body div#content ... { ... }. You can look at the developer tools of your browser to see in which order the CSS rules are applied.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
Thankyou mvlcek. I already have the developer tools when trying to figure it out. I will go back to to the drawing board and see if I can figure it out Smile
Reply
Hi, I've spent another few hours trying to figure it out adding divs and CSS everywhere on all levels etc. If anybody has already figured out how to center a gallery in a parent container or div then I'd much appreciate it.

For example if the gallery only has 1 pic then it's centered or if the gallery has three pics across then those are centered as well.

Thanks in advance
Reply
(2013-11-21, 12:31:21)stryker Wrote: Hi, I've spent another few hours trying to figure it out adding divs and CSS everywhere on all levels etc. If anybody has already figured out how to center a gallery in a parent container or div then I'd much appreciate it.

For example if the gallery only has 1 pic then it's centered or if the gallery has three pics across then those are centered as well.

Thanks in advance

Code:
div#container_for_gallery .gallery-prettyphoto {
    width: width_of_your_thumbs px;
        margin: 0 auto;
}
div#container_for_gallery .gallery-prettyphoto .gallery-thumb {
        clear: left;
        margin: 0;  
        padding: 0;    
}
Reply
Thankyou for you suggestion Martin. This code only seems to work if I want to have one thumbnail displayed per row. The problem I have is to be able to center the whole row of thumbnails (could be 2,3 or 4 per row) within a 100% container div.


I have attached a diagram that may explain it better.
   
Reply
(2013-11-22, 05:44:25)stryker Wrote: Thankyou for you suggestion Martin. This code only seems to work if I want to have one thumbnail displayed per row. The problem I have is to be able to center the whole row of thumbnails (could be 2,3 or 4 per row) within a 100% container div.

The only way to center multiple objects is by treating them as inline text, e.g. (assuming a div with id "content" surrounds your page content):
Code:
#content div.gallery {
    text-align: center;
}
#content div.gallery div.gallery-thumb {
    display: inline;
    float: none;
    padding: 0;
    border: 0 none;
}
#content div.gallery div.gallery-thumb a img {
    padding: 3px;
    border: #C7C7C7 1px solid;
}
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
Unfortunately I still don't get the thumbnails centered on the page. I have created an "Out of the box" install and only added the gallery plugins that are needed.

My code on the "gallery" page is;

<div id="content">(% gallery name=test %)</div>

I copied your CSS exactly but I only get one icon per row as per this image attached.
   

I then just take out the "float: none" and multiple thumbnails appear on the same row as expected but again they are not centered in the containing div. (as per this image)
   

It's getting quite challenging I think. The reason why I thinks it's important is that the gallery looks so much better when centered in the space around it. Especially when the layout is fluid because of the different possible viewpoints.

If I had a magic wand I would also wish for the thumbnails to justified between the parent div no matter what size the view port is - ie the space between the images are the same as the space between the left / right of the parent div and the first / last image on that row - Then again if I had a magic wand I would probable wish for other things as well Smile
   
Reply
(2013-11-22, 08:01:47)stryker Wrote: Unfortunately I still don't get the thumbnails centered on the page. I have created an "Out of the box" install and only added the gallery plugins that are needed.

My code on the "gallery" page is;

<div id="content">(% gallery name=test %)</div>

I copied your CSS exactly but I only get one icon per row as per this image attached.

I then just take out the "float: none" and multiple thumbnails appear on the same row as expected but again they are not centered in the containing div. (as per this image)

It's getting quite challenging I think. The reason why I thinks it's important is that the gallery looks so much better when centered in the space around it. Especially when the layout is fluid because of the different possible viewpoints.

If I had a magic wand I would also wish for the thumbnails to justified between the parent div no matter what size the view port is - ie the space between the images are the same as the space between the left / right of the parent div and the first / last image on that row - Then again if I had a magic wand I would probable wish for other things as well Smile
I tried mvlcek recommendation – for me it works:
Code:
div#your_container_for_gallery .gallery-prettyphoto {
text-align: center;
}

div#your_container_for_gallery .gallery-prettyphoto .gallery-thumb {
      float: none;
      display: inline-block;
}
Reply
FANTASTIC Martin. That slight variation for some reason did the trick. That's such a relief, it's been bothering me for months Smile

mvlcek, a suggestion to maybe have the thumbnails even across the page independent of the browser width could be a feature in a next version??. The web is going responsive and this would add style to an already great plugin.

Thanks for all your efforts.
Reply
Hello Guys,

installed the Plugin and set the Code (% gallery name=creaton %) into my page.

I think the Plugin dont load pretty photo but i dont know why...

My page is:
http://pegels.be-virtual.org/index.php?id=baustoffe

Thank your very much Smile
Reply
MVlcek,

something strange happens, a cycle gallery suddenly is taking images from thumbs folder instead of from the original one.

From page source:
<div class="gallery-image">
<img src="http://www......com/data/thumbs/i18npic.899x520.website-stads-01.jpg">

while image should come from < ... /data/uploads/website-stads-01.png>

from plugin_cycle.php I suspect that is coming from here:

<?php if ($tp == 'bottom') { ?><div class="gallery-image"><img src="<?php i18n_gallery_image_link($gallery,$item); ?>" alt="name"/></div><?php } ?>

Gallery image cache is empty.

PNG images are uploaded as PNG and as PNG placed in the gallery ..

Gallery Version 1.7.1.

CHeers
Reply
(2013-11-25, 03:09:36)alex_d Wrote: something strange happens, a cycle gallery suddenly is taking images from thumbs folder instead of from the original one.

From page source:
<div class="gallery-image">
<img src="http://www......com/data/thumbs/i18npic.899x520.website-stads-01.jpg">

while image should come from < ... /data/uploads/website-stads-01.png>

This is the normal behaviour: If you specify a size for the images, the images will be resized and cached in the thumbs directory.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
ok thanx for your reply,

on the some other gallery's within same GS installation this is not happening and I can use PNG's

Just to mention, I'm not using 'thumbnails' resided by Gallery only uploaded files.


(2013-11-25, 03:34:48)mvlcek Wrote:
(2013-11-25, 03:09:36)alex_d Wrote: something strange happens, a cycle gallery suddenly is taking images from thumbs folder instead of from the original one.

From page source:
<div class="gallery-image">
<img src="http://www......com/data/thumbs/i18npic.899x520.website-stads-01.jpg">

while image should come from < ... /data/uploads/website-stads-01.png>

This is the normal behaviour: If you specify a size for the images, the images will be resized and cached in the thumbs directory.
Reply
(2013-11-25, 03:58:39)alex_d Wrote: ok thanx for your reply,

on the some other gallery's within same GS installation this is not happening and I can use PNG's

If your image size is equal or larger than the uploaded images than no resizing is needed and the original images are used. So the best way is to upload the images in the size that will be displayed in.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
HI Mvlcek,

it's not about the image size because I'm not resizing them.

After thorow research I suspect that new optimized PNG from tinypng.org started the problem.

When I added new PNG's to the existing gallery somehow they were not coming from /upload/ but from gallery cache.
So I suspect now that problem could be inside 'pic.php' and Mime setup.

Or could it lay on the new version of PHP?

Thanx for your responses,

Alex

(2013-11-25, 07:36:24)mvlcek Wrote:
(2013-11-25, 03:58:39)alex_d Wrote: ok thanx for your reply,

on the some other gallery's within same GS installation this is not happening and I can use PNG's

If your image size is equal or larger than the uploaded images than no resizing is needed and the original images are used. So the best way is to upload the images in the size that will be displayed in.
Reply
(2013-11-25, 19:25:21)alex_d Wrote: it's not about the image size because I'm not resizing them.

You MUST HAVE SET the maximum image dimensions in your gallery options (to 899 x 520, as seen by the image link), thus causing resizing, otherwise the original image would be displayed.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
Ok thanx for this MVlcek, I'll try it with max size

Cheers

(2013-11-25, 20:39:49)mvlcek Wrote:
(2013-11-25, 19:25:21)alex_d Wrote: it's not about the image size because I'm not resizing them.

You MUST HAVE SET the maximum image dimensions in your gallery options (to 899 x 520, as seen by the image link), thus causing resizing, otherwise the original image would be displayed.
Reply
Hi Mvlcek, I'm having an issue after changing my permalink structure from %parent%/%slug%/ to %parents%/%slug%/ - now when I look at the source code for my gallery, the parent slug has been replaced with %parents%

Is there a fix for this? I've updated i18n, i18n Search and i18n Custom Fields.

UPDATE: Version 2.1 of the plugin has resolved this issue. Thanks mvlcek!!

Code:
<div class="gallery-thumb" >
    <a href="http://domain.com/%parents%/gallery/?pic=galleryname:-3" rel="fancybox-galleryname" title="">
        <img src="http://domain.com/data/thumbs/gallery/i18npic.C82x82.imagename.jpg" alt=""/>
    </a>
</div>
Reply
Yes this works,

thanx MVlcek!

(2013-11-25, 22:24:08)alex_d Wrote: Ok thanx for this MVlcek, I'll try it with max size

Cheers

(2013-11-25, 20:39:49)mvlcek Wrote:
(2013-11-25, 19:25:21)alex_d Wrote: it's not about the image size because I'm not resizing them.

You MUST HAVE SET the maximum image dimensions in your gallery options (to 899 x 520, as seen by the image link), thus causing resizing, otherwise the original image would be displayed.
Reply
Hi

I have a problem, when i use:
Code:
(% gallerylink name=gallery1 url=gallery1 thumb=random %)
It shows nothong - blank page.
Code:
(% gallery name=gallery1 %)
This works fine.

Where there may be a problem?
Reply
Hi guys,

Please tell me, is there any simple option to make slider (cycle mode) responsive for the screen resolution change ?

Somebody few posts earlier talked about some css rules ? Please give me the actual instructions !

Best regards
zulusnet
Reply
Hello,

I would like to completely disable PrettyPhoto when only displayed on a Phone (iphone / android).

I've played around with the plugin_prettyphoto.php file where the JS gets loaded but can't figure out the exact syntax.

Basically if a device is iphone / android then don't load the jquery.prettyPhoto.js.

Any Ideas or other ways to acheive this. PrettyPhoto does not work too well on phones
Reply
i'm used a:
(% gallery name=start %)

galery name is exist and working in all pages .. but when i'm used a:

<?php get_i18n_content('start-galeria');?>

where a 'start-galeria' is a page name..
and in page 'start-galeria' i'm input this line
(% gallery name=start %)

layout don't see this plugin ;(
print screen:
https://dl.dropboxusercontent.com/u/49983884/in/44.jpg

can enyone help why in
<?php get_i18n_content('start-galeria');?>
or
<?php getPageContent('start-galeria'); ?>

gallery plugin is don't working ??
user plugin: scroll to top
Reply
(2013-12-20, 07:13:41)zulusnet Wrote: Please tell me, is there any simple option to make slider (cycle mode) responsive for the screen resolution change ?

No, there isn't a simple solution. You could probably overwrite the CSS generated by the plugin in your own style sheet based on media queries regarding the screen size.
I18N, I18N Search, I18N Gallery, I18N Special Pages - essential plugins for multi-language sites.
Reply
Hello mvlcek.

I have problem with showing gallery. The picture is show but not in slide. Can u guide me how to use your 'I18N Gallery' at GSPixa theme.
I am really sorry i'm newbe at web programing, so please guide me.
Thanks...

--
Never mind, i am done with hard work, hehe...
Reply




Users browsing this thread: 5 Guest(s)