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
Code:
<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>
2) In the external touchgallery.js file
Code:
(function($){
var gallerydefaults = {
width: 300,
height: 250,
navarea: '20%',
curslide: 0,
threshold: 75,
navbuttons : ['left.png', 'right.png', -10]
}
3) In the external touchgallery.css file
Code:
.touchgallery{
position: relative;
overflow: hidden;
width: 350px; /* default gallery width */
height: 270px; /* default gallery height */
}
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?
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.
