Is it possible to make images 100% height and width in Touch Image Gallery
1) Script Title: Touch Image Gallery
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uchgallery.htm
3) Describe problem:
I am using Touch Image Gallery to display images, however the size it displays at is measured in pixels whereas I would like to nest the whole gallery in a parent div which I styled responsively and have the Touch Image Gallery display at 100% x 100% of the parent.
I have looked through the code and found height and width attributes in a few places...
1) In the <head> copy/paste section
2) In the external touchgallery.js fileCode:<script> jQuery(function(){ // on DOM load $('div#touchgallery1').touchgallery({ // initialize first demo width: 250, height: 200 }) $('div#touchgallery2').touchgallery({ // initialize second demo width: 400, height: 350 }) }) </script>
3) In the external touchgallery.css fileCode:(function($){ var gallerydefaults = { width: 300, height: 250, navarea: '20%', curslide: 0, threshold: 75, navbuttons : ['left.png', 'right.png', -10] }
But not matter what changes / combination of changes I make I can't seem to get it to render as a percentage size, it either maintains pixel sizing or simply doesn't appear at all. Is there some reason fluid sizing won't work with this or am I just missing something silly?Code:.touchgallery{ position: relative; overflow: hidden; width: 350px; /* default gallery width */ height: 270px; /* default gallery height */ }
Also another unrelated problem I am having with this, less important to me but figured I'd point it out while I was writing anyway, when the cursor is within the threshhold area to click for next/previous it disappears. All functionality is maintained and clicking reveals the next slide, but the cursor can't be seen.
CSS Codes
Reply With Quote
Bookmarks