CSS Image Gallery Support Product Page

Change CSS Image Gallery Template

Asked 26 Sep 2012 16:34:49
1
has this question
26 Sep 2012 16:34:49 Heather V posted:
The CSS Image Gallery seems to have a fixed template where the jquery code encodes the navigation arrows and the captions only in an assigned place.

Instead of the navigation arrows for the main image being inside the container, I want to place it below the main image container.

With the caption, I want it above the main image container instead of inside the main image container.

How can this be accomplished by modifying it's placement within the code? CSS isn't an option because of the way the code is inserted by the jquery call.

I really would like to make this work, if I can receive assistance on modifying it.

Thank you.

Replies

Replied 27 Sep 2012 06:29:59
27 Sep 2012 06:29:59 Teodor Kuduschiev replied:
Hello Heather,

Using CSS you can:

- Change the arrow images, opacity and position.
- change the caption background, font, size, height, padding.

But it is not possible to move any of the elements outside the gallery container.
Replied 27 Sep 2012 15:17:33
27 Sep 2012 15:17:33 Heather V replied:
So there is no way for DMXZone to customize this for their customers?
Replied 27 Sep 2012 17:55:45
27 Sep 2012 17:55:45 Teodor Kuduschiev replied:
Unfortunately it is not possible.
Replied 07 Aug 2023 07:30:55
07 Aug 2023 07:30:55 Yasir 188 replied:
In the jQuery code, look for the part where the navigation arrows are created and inserted into the HTML. It might look something like this:

var navigationArrows = '<div class="gallery-navigation-arrows">...</div>';

Instead of appending the navigationArrows directly to the container, you can append it after the main image container.
Similarly, locate the part of the jQuery code where the caption is created and inserted into the HTML. It might look like this:

var caption = '<div class="gallery-caption">...</div>';

This will place the caption above the main image container as on pintodown.

By making these modifications to the jQuery code, you can achieve the desired placement of the navigation arrows and caption in the CSS Image Gallery. Remember to update the class names and HTML elements according to your actual code.

Reply to this topic