Results 1 to 7 of 7

Thread: Touch Image Gallery

  1. #1
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Touch Image Gallery

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default lists

    Quote Originally Posted by jscheuer1 View Post
    First of all I would try using the actual dimensions of the images:

    Code:
    <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?

  4. #4
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    10

    Default

    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;
    Code:
    .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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    jscheuer1 (07-12-2013)

  8. #7
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lists

    Quote Originally Posted by Beverleyh View Post
    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;
    Code:
    .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

Similar Threads

  1. old iPod touch problem
    By Jack in forum The lounge
    Replies: 2
    Last Post: 02-10-2013, 02:49 AM
  2. Replies: 1
    Last Post: 02-26-2012, 12:06 PM
  3. Replies: 0
    Last Post: 05-19-2011, 07:33 PM
  4. Replies: 11
    Last Post: 07-23-2010, 05:03 PM
  5. iPod Touch - Very Cool -:)
    By Jack in forum The lounge
    Replies: 0
    Last Post: 07-11-2009, 03:23 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •