Joomla Templates Club 406,261 posts

[martinus Friend martinusJoin date: November 2006Posts: 139Downloads:21Uploads:22 Thanks: 2]

#993193

Hi
I’m using the JA Resume Photographer template in a site at http://www.caetano.info. And also the built in galleries. I use the smallest image size in the Gallery overview pages – take a look here: http://caetano.info/en/my-art/early-works/song-of-africa

When you click on one of the small images here it opens a larger copy of the image. So far so good. Now to the problem: When you click on the small images you can do so even if the black information text-block rolls up from the bottom. But if you click inside the black text-box the image opens without navigation – eg. arrows pointing left/right or/and Close-x in top right corner.

If you click out side the black box – in other words somewhere in the visible part of the small image – it opens with the navigation equipment.

As many tablet-users – and I smartphone users for sure – tend to click inside the black box – I would like the navigation equipment to appear regardless your click position. I’m sure it annoys users that they can’t even close the enlarged image after they have clicked it open!

How to do this?
Yours
Claus

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#993340

Hi Claus,

I’m a bit confused of how you want to achieve here. Kindly check the gallery in our demo site which has popup: http://ja-resume.demo.joomlart.com/index.php/en/

and send me screenshots illustrating how you want it should be.

Regards

[martinus Friend martinusJoin date: November 2006Posts: 139Downloads:21Uploads:22 Thanks: 2]

#993379

Hi Saguaros
I’ll try to make it clearer:

1. go to http://caetano.info/en/my-art-3/early-works/song-of-africa
2. Place mouse over one of the images in gallery
3. Black overlay appears with white text – moves in from bottom.
4. Move the mouse outside the overlay area and click on the image it self…
5. An enlarged image will appear with navigation arrows to the left and right plus the close cross in the top right corner – Just as it should!
6. Now go back and try once more
7. Place mouse op top of an image – and the black overlay with text appears.
8. This time make sure that you click for enlargement somewhere within the black overlay with the white text.
   9.: Now the enlarged image opens – but without the arrows and the closing cross in the top.
9. This is very irritation as users tend to click inside the black overlay. On tablets the images will be so big that the can’t navigate back

I want to have the arrows and the closing cross visible whenever the image is viewed enlarged.

Hope it gets a bit clearer now!

Yours
Claus

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#993759

Hi Claus,

Yes, it makes senses.

You can try to open this file: ROOT/templates/ja_resume/acm/gallery/tmpl/style-2.php

If you didn’t customize anything in this file, you can backup it and replace by the attached file.

---

Attachments:

1. style-2.php_.zip

[martinus Friend martinusJoin date: November 2006Posts: 139Downloads:21Uploads:22 Thanks: 2]

#993888

Thanks – it seemed to be working ok.

I need to edit font-sizes in the gallery aswell. Could U please direct me to the place where I can set the font-size. I’ve managed to find the spot controlling the header in the overlay box…
See the attached file. I need to have a fontsize of the ordinary text so if matches the headline

Yours

Claus

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#994037

Hi Claus,

Try to use the Inspect Element in Chrome or Firebug editor in Firefox browser, you can easily see / change the font size: http://prntscr.com/diq7lw

Then open the file: ROOT/templates/ja_resume (your default template)/css/custom.css (create this file if it doesn’t exist) and add your desired css code there.

For example, with the title:

.acm-gallery.style-2 .isotope-layout .item .item-image-content .title {
  font-size: 10px;
}

Regards

[Author]

Posts