Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: Creating a gallery slider

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

    Default Creating a gallery slider

    I知 looking to generate some more work for myself & earn some more 」」」
    I thought to do this in the form on a gallery slider for which I will put on my web site.

    I知 looking at this gallery here,
    https://www.w3schools.com/howto/howt...ow_gallery.asp

    I like the option for a title below the image & think this would work nicely for what I need.
    I plan to use Alt tags within the code for each photo so they will show up when customer are searching Google etc.

    The main goal for this gallery is for the photos to be retrieved by search engines for when a potential customer types in Google etc say Honda Motorcycle Key.
    I understand each photo will have a different key words but I think this code needs some alterations to allow this.
    Or if you can advise another I知 willing to look / use it.

    Thanks.

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

    Default

    Morning,
    Im making progress with the above gallery but need some help if i may ask with the following issue.
    Here is the page in question https://www.theremotedoctor.co.uk/bikegallery.html

    Currently the image is 640 x 480 but when i use the correct images these will maybe be 800 x 600

    1,Im looking to have the main image centered as currently its to the left.

    2,Because of the above "i think" the previous arrow is shown on the main image BUT the next arrow is missing.

    3,I tried to apply a background of which is clouds "can be seen here https://www.theremotedoctor.co.uk/index.html" to the css body but i only made the main image huge.

    4,I plan to add a black border around each thumb photo & also the main photo.

    5, I have a syntax error in the js file at Line 1 but ive copied the code straight from the site so not sure whats happened there.

    Many Thanks

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

    Default

    Just an update.
    Ive noe done the following.
    Main image centered.
    Background now applied.
    Border around image done.


    Need some advice please with the following please.

    Syntax error in js file line 1
    Previous & Next arrow on image still an issue.
    Using a previously supplied code for responsiveness "see below" i wish to also use it here but unable to get the image to resize.
    Ive changed the word modal-image etc but not sure which i need to target for it to work.


    /************** For iPhone 5 and 6 **************/
    @media (width: 568px) and (height: 320px),
    (width: 667px) and (height: 375px) {
    #modal-image,
    #modal video {
    height: 70%;
    width: auto;
    }
    }

    @media (width: 320px) and (height: 568px),
    (width: 375px) and (height: 667px) {
    #modal-image,
    #modal video {
    height:auto;
    width: 90%;
    }
    }
    /*******************************************/



    Here is the page

    https://www.theremotedoctor.co.uk/bikegallery.html

    Thanks

  4. #4
    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,


    try this minor amendment...

    HTML
    Change this...
    Code:
      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
    ...to this...
    Code:
    <div id="pandn">
      <a class="prev" onclick="plusSlides(-1)">❮</a>
      <a class="next" onclick="plusSlides(1)">❯</a>
    </div>
    CSS
    Test the amendment with this...

    Attached Files Attached Files
    ~ the original bald headed old fart ~

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

    Default

    Evening.

    That worked & the arrows are now nicely shown.

    Can you spare a few minutes to check some items for me please, only if you have time.

    I am struggl9ing with the image responsive part,only just been able to resize the image for my phone.
    Im looking to get it shown a little large if possible.

    Also for the phone i wish to remove the opacity of the thumbs.
    The Pc is fine BUT on the phone you click with your finger & not hover as no mouse so each thumb is hazy.
    So im looking to have them all visable.
    I think i have some ( & ) in the wrong place though

    Code:
    /************** For iPhone 5 and 6  **************/
    @media (width: 568px) and (height: 320px),
           (width: 667px) and (height: 375px) {
    .img {
      height: 90%;
      width: auto;
      }
    .demo {
      opacity: 0.1;
    }
     }
    
    @media (width: 320px) and (height: 568px),
    (width: 375px) and (height: 667px) {
    .img {
      height:auto;
      width: 90%;
    }
    .demo {
      opacity: 0.1;
    
      }
     }
     /*******************************************/

  6. #6
    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,


    This is how the amended code renders on an iPhone 5

    Click image for larger version. 

Name:	iPhone-5.jpg 
Views:	22 
Size:	47.4 KB 
ID:	6528

    coothead
    ~ the original bald headed old fart ~

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

    I removed this ...

    Code:
    /************** For iPhone 5 and 6  **************/
    @media (width: 568px) and (height: 320px),
           (width: 667px) and (height: 375px) {
    .img {
      height: 90%;
      width: auto;
      }
     }
    
    @media (width: 320px) and (height: 568px),
    (width: 375px) and (height: 667px) {
    .img {
      height:auto;
      width: 90%;
    }
    }
    ....from rhe bike-gallery=coothead-test.css

    coothead
    ~ the original bald headed old fart ~

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

    Default

    That would be nice to have that look on the iphone 6s +
    See my screenshot

    You can see the main image is a lot smaller.
    The next / previous are not on the image thus just about see them
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4083.jpg 
Views:	17 
Size:	78.3 KB 
ID:	6529  

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

    Default

    I have removed opacity code

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

    Default

    See screen shots taken when using F12
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4084.jpg 
Views:	16 
Size:	60.7 KB 
ID:	6530   Click image for larger version. 

Name:	4085.jpg 
Views:	16 
Size:	67.3 KB 
ID:	6531  

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
  •