CSS Image Gallery Support Product Page
This topic is locked
This topic was archived
Arrow-Button Position In Thumbnails - RESOLVED
Asked 07 Oct 2009 10:31:06
1
has this question
07 Oct 2009 10:31:06 Denis Hoffmann posted:
Hi,maybe it is already asked.
How can I place the Arrow-Buttons in the thumbnails to the left and right of the thumbnails NOT over the Thumbs.
And if they are well positioned, how can they stay visible?
Thanks for help,
Denis
Replies
Replied 08 Oct 2009 08:19:42
08 Oct 2009 08:19:42 Patrick Julicher replied:
Replied 08 Oct 2009 10:20:20
08 Oct 2009 10:20:20 Denis Hoffmann replied:
Hi Patrick,
looks good, but does that also work for the THUMBNAIL buttons?
looks good, but does that also work for the THUMBNAIL buttons?
Replied 08 Oct 2009 11:08:30
08 Oct 2009 11:08:30 Patrick Julicher replied:
Hi Dennis,
In the dmxgallery.css file in the Styles folder, there are also specific CSS styles for the thumbnails and their navigation controls.
Kind regards, Patrick
In the dmxgallery.css file in the Styles folder, there are also specific CSS styles for the thumbnails and their navigation controls.
Kind regards, Patrick
Replied 08 Oct 2009 11:23:28
08 Oct 2009 11:23:28 Teodor Kuduschiev replied:
Yes, It works.
You just have to play with:
}
and
So yu can set the position of the buttons as you like.
You just have to play with:
.dmxThumbList a.dmxNext { position: absolute; bottom: 25px; right: 2px; z-index: 10; width: 40px; height: 40px; background-image: url( 'controlbl_next.png' ); background-position: right top;
}
and
.dmxThumbList a.dmxPrevious { bottom: 25px; left: 2px; z-index: 10; width: 40px; height: 40px; background-image: url( 'controlbl_prev.png' ); background-position: left top; }
So yu can set the position of the buttons as you like.
Replied 08 Oct 2009 19:49:33
08 Oct 2009 19:49:33 Denis Hoffmann replied:
Yeah, I found it, but how do I make the thumb list smaller.
I need a gallery like that:
(Image deleted by user)
I need a gallery like that:
(Image deleted by user)
Replied 08 Oct 2009 20:46:57
08 Oct 2009 20:46:57 Patrick Julicher replied:
Hi Denis,
First create and insert the CSS Gallery like you normally do. Then view the page in Code View and find the jQuery code. Edit the thumbHolderPosition to bottom, and set the thumbWidth, thumbHeight, thumbPadding and thumbHolderHeight to your wishes.
You will end up with something you wish for.
Kind regards, Patrick
First create and insert the CSS Gallery like you normally do. Then view the page in Code View and find the jQuery code. Edit the thumbHolderPosition to bottom, and set the thumbWidth, thumbHeight, thumbPadding and thumbHolderHeight to your wishes.
<script type="text/javascript"> // <![CDATA[ jQuery(document).ready( function() { jQuery("#cssGallery1").dmxGallery( { width: 555, height: 338, thumbWidth: 60, thumbHeight: 50, thumbPadding: 5, thumbHolderHeight: 55, thumbHolderPosition: 'bottom', thumbShowOnHover: false, captionPosition: 'top', playerDelay: 3, autoPlay: false, autosize: true, captionOpacity: 40, imgIndex: 0, preloadTreshold: 2, currentImage: 2 } ); } ); // ]]> </script>
You will end up with something you wish for.
Kind regards, Patrick