PDA

View Full Version : Is it possible to make images 100% height and width in Touch Image Gallery



Neil1
11-17-2016, 06:59 PM
1) Script Title: Touch Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/touchgallery.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


<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


(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


.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.

ddadmin
11-18-2016, 08:18 PM
Hmm there's currently no quick way to get the gallery to be fluid in dimensions. I'll take a look at adding such an option the next time the script is updated.