PDA

View Full Version : Touch Image Gallery



Brends
07-11-2013, 01:07 PM
1) Script Title: Touch Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/touchgallery.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
07-11-2013, 03:08 PM
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
07-11-2013, 04:17 PM
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
07-11-2013, 04:18 PM
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
07-11-2013, 04:31 PM
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
07-11-2013, 05:15 PM
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
07-11-2013, 05:32 PM
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 :)