Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 25

Thread: Creating a gallery slider

  1. #11
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    I think i found it,will reply in 5 minutes

  2. #12
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Done it.
    Width was set to 45% so now changed.

    Many thanks for the help tonight.

    Ive been on this all day & your advice did it in minutes.

    Thanks very much.

    I will play with it as there was others but cant remember now so see you later

  3. #13
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,305
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default

    Hi there theremotedr,

    youcan see my working example here...

    Full Page View
    https://codepen.io/coothead/full/rNdyRVw

    ...and the CSS here...

    Editor View
    https://codepen.io/coothead/pen/rNdyRVw

    coothead
    ~ the original bald headed old fart ~

  4. #14
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    I’ve noticed a difference so maybe you can advise.

    Before you replied this evening I have an issue where the photo wouldn’t resize on the phone when using responsive css.
    I then noticed that my photos were a fixed size so I changed them to style width 95% if I remember correctly as now not on pc.
    This then allowed the css to resize the image.

    So just looking at your css I see you have a fixed size of 640 x 480.
    If you look at the code on the url you will see I have it at 95%

    So please advise if I now need to put it back to 640 x 480 again.
    Thanks.

  5. #15
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,305
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default

    Hi there theremotedr,

    no, I set the width to 100% with a maximum width of 640px...

    Code:
    img{
      display: block;
      width: 100%;
      height: auto;
      max-width:640px;
      border: 1px solid #000;
      margin: auto;
    }
    This will make ti work perfectly on all device widths.
    Of course, you cab use width:95% if right and left margins
    are preferred but don't use style="width:95%" on every
    element, instead set it in the CSS

    coothead
    ~ the original bald headed old fart ~

  6. #16
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    I like the look of the margins.
    So in your attached code it shows width 100%
    So is that where I need to change it to 95%

  7. #17
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,305
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default


    Yes, that is correct.

    coothead
    ~ the original bald headed old fart ~

  8. #18
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Ok
    I will change that tomorrow.

    Remember on the other gallery we applied some code where the lower half of the page slide behind the top half this the top half always in view ?

    Can you do the same on this page ?

    I was thinking the more photos that are added some people will not use the next & previous arrows but will want to look through the thumbs. Doing this then makes the main image move off the screen.

    How about allow the thumbs to scroll behind the lower black section where currently you see the ALT text.
    This will allow the main photo & itís Alt text to stay in view & clicking a thumb will be shown.

    See my attached image for where the cut off line is if that makes sense.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	AA0E1EF6-E57C-4EEE-BE88-13FFE94A944F.jpg 
Views:	15 
Size:	16.6 KB 
ID:	6532  

  9. #19
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,305
    Thanks
    3
    Thanked 286 Times in 279 Posts

    Default

    Hi there theremotedr,

    add a div element here as indicated in red...
    Code:
    <div class="container">
     <div>
      <div class="mySlides">
    ..and it's closing tag here as indicated in red...
    Code:
      <div class="caption-container">
        <p id="caption"></p>
      </div>
     </div>
    <div class="row">
    Then add this code to your CSS...
    Code:
    .container > div:nth-of-type(1) {
      position: sticky;
      top: 0;
      background-image: url(https://theremotedoctor.co.uk/m-images/background.png);
      background-attachment: fixed;
    }

    coothead
    ~ the original bald headed old fart ~

  10. #20
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    All done.

    Please see screenshots so we can just scroll up behind without the name being partially lost.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4086.jpg 
Views:	17 
Size:	57.6 KB 
ID:	6533   Click image for larger version. 

Name:	4087.jpg 
Views:	17 
Size:	54.6 KB 
ID:	6534  
    Last edited by theremotedr; 07-20-2022 at 12:49 AM.

Similar Threads

  1. trouble creating a photo gallery
    By Reptar92 in forum PHP
    Replies: 3
    Last Post: 08-09-2012, 02:49 AM
  2. Content Slider Gallery for video Gallery
    By Aleksandra in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-28-2011, 01:20 AM
  3. Creating An Image Gallery
    By experience66 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-18-2006, 08:42 PM
  4. help creating a gallery...
    By DizzyLizzy in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-09-2005, 01:45 AM

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
  •