Touch Image Gallery

[Brends]

1) Script Title: Touch Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uchgallery.htm

3) Describe problem: Please see www.brends.co.za/FGC/index.html. I have uploaded my problem there. I have 4 images and only 3 are displaying. I am also confused as to the size of the gallery and what it should be. My images are all 380 x 475. I have also had a look at the code for the navbuttons and when I put that in my entire gallery size changes. I want to be able to move the right navbutton a bit further to the right.

Thanks I appreciate your help.

Brends

[jscheuer1]

First of all I would try using the actual dimensions of the images:

<script>

jQuery(function(){ // on DOM load
		$('div#touchgallery2').touchgallery({  // initialize second demo
			width: 380,
			height: 475
		})
	})

</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Brends]

First of all I would try using the actual dimensions of the images:

<script>

jQuery(function(){ // on DOM load
		$('div#touchgallery2').touchgallery({  // initialize second demo
			width: 380,
			height: 475
		})
	})

</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

Is there a way to use this code without the List tags?

[Brends]

sorry didn't say thanks for responding. I changed the image size to the size of the image but that has made the issue worse. I think it has something to do with the list tags.

[jscheuer1]

Probably not. Please let me see it with the dimensions I recommended.

However, since I will be away for the rest of the day, make a copy of the page if you don't want it to be the live version and give it a different name, put it in the same folder and give me a link to it.

[Beverleyh]

If I could add something here to help you out (and John while he's busy elsewhere), the first thing that springs to mind with a list is the default padding - if there is padding on the <li> element then the image dimensions inside will be skewed.

Anyway, I took this inkling into the Chrome dev console and, sure enough, the padding on the <li> is to blame - in the "style.css" file;

.art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li
{
   padding-left: 15px;
}

zero/remove this padding and that should fix things with the dimensions and also showing the last image.

[Brends]

If I could add something here to help you out (and John while he's busy elsewhere), the first thing that springs to mind with a list is the default padding - if there is padding on the <li> element then the image dimensions inside will be skewed.

Anyway, I took this inkling into the Chrome dev console and, sure enough, the padding on the <li> is to blame - in the "style.css" file;

.art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li
{
   padding-left: 15px;
}

zero/remove this padding and that should fix things with the dimensions and also showing the last image.

Beverleyh you are a star! It worked! But I have had to make the image sizes the script bigger.
<script>

jQuery(function(){ // on DOM load
$('div#touchgallery2').touchgallery({ // initialize second demo
width: 430,
height: 530
})
})

</script>

But I'm happy. Have a look www.brends.co.za/FGC/index.html.

Thanks to both of you for your help. My first time here and I am super happy to have interacted with you