Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
Like Tree3Likes
  • 1 Post By cosmic_wheels
  • 1 Post By cosmic_wheels
  • 1 Post By cosmic_wheels

Thread: Apply width height to image need assistance

  1. #1
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times

    Apply width height to image need assistance

    Hi,
    Here is the page i am workng on,
    The Attic Banwell

    You will see thumbnails & once clicked the full size image.

    I would like to alter the code below so i dont need to resize pictures manually before i save to the folder of which they are stored.

    I wish to just put some code in place that will do it for me.

    This is the current code in use.

    Code:
    <li><img src="images/thumbs/2.jpg" data-large="images/fulls/2.jpg" data-description="A plaintful story from a sistering vale" /></a></li>
    If i add the code shown below after the images/fulls/2.jpg it makes the thumbnail that size.
    I need to have thumbnail the size as is which is 65 x 65 but just the full image to then be resized to say 800 x 600 without a visual erro like mentioned above.

    Code:
    <li><img src="images/thumbs/2.jpg" data-large="images/fulls/2.jpg"  width="800" height="600" data-description="A plaintful story from a sistering vale" /></a></li>

  2.  

  3. #2
    Member cosmic_wheels's Avatar
    Join Date
    Nov 2017
    Location
    Falkirk,Scotland
    Posts
    36
    Member #
    57853
    Liked
    5 times
    You could add the following CSS to be able to use the full size images as thumbnails:

    .es-carousel>ul>li{
    overflow: hidden;
    height: 69px;
    }

    .es-carousel>ul>li>img{
    width: auto;
    height: 100%;
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    }

  4. #3
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    Ive added that but the thumbnail is ok for width but height its a mile down the page.

    just to confirm i ADD the code advised ?

    See screen shot.,


    3661.jpg

    Thanks

  5. #4
    Member cosmic_wheels's Avatar
    Join Date
    Nov 2017
    Location
    Falkirk,Scotland
    Posts
    36
    Member #
    57853
    Liked
    5 times
    Can you add the code to the live site where I can take a look. I suspect the height of that li element is being overridden to be 100% instead of 69px; If that is the case you can add "!important" after the height to force it to the 69px height and see if that works, like so:

    .es-carousel>ul>li{

    overflow: hidden;
    height: 69px !important;

    }

    If that doesn't work, update the live site with the latest css and I'll let you know how to fix it.
    ipbr21054 likes this.

  6. #5
    Member cosmic_wheels's Avatar
    Join Date
    Nov 2017
    Location
    Falkirk,Scotland
    Posts
    36
    Member #
    57853
    Liked
    5 times
    You could instead, also add max-height:69px; instead of height:69px; which will still it streching to 100% height.
    ipbr21054 likes this.

  7. #6
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    Ive now added important & seems to now be ok.
    I have uploaded to live site.

    The thumbnail isnt quite right as it looks like a partial glance of the large image and as you can see its not really showing anything.

  8. #7
    Member cosmic_wheels's Avatar
    Join Date
    Nov 2017
    Location
    Falkirk,Scotland
    Posts
    36
    Member #
    57853
    Liked
    5 times
    Here is a link to the css that will make this work:

    https://gist.github.com/cosmicwheels...171e1a4bd81427

    Back up your elastislide.css file and replace the file with this one. I've tested this alongside your html and it's working.

    Please note that, alought this will create a thumbnail, it will still cut a small portion of the image off, since you will be adding a rectangular image into a square. If you want to display the full image as a thumbnail, you can always swap the "height:100%; width:auto;" with "width:100%; height:auto;" but it wouldn't look as good.
    ipbr21054 likes this.

  9. #8
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Morning,
    Ive now changed that and it looks great,many thanks.

    With respect to clicking the thumbnail and then the full size image is shown,can the container restrict the size shown on screen.
    I mean using this hi res image is great but the user then needs to scroll down the page to click another thumbnail.
    Currently depending on the size of the image the screen alters which is fine but can we put something in place so regardless of image size the container which has the image in will not allow the thumbnails to leave the screen.

    Did i explain that correctly for you to understand ?

    Many thanks

  10. #9
    Member cosmic_wheels's Avatar
    Join Date
    Nov 2017
    Location
    Falkirk,Scotland
    Posts
    36
    Member #
    57853
    Liked
    5 times
    You could used a "fixed" position on the thumbnail container to attach it to the bottom of the screen. This would keep it fixed to the bottom of the screen regardless of screen size. You would have to add addition CSS to keep it in the centre and to the correct width but it wouldn't be too difficult. It would also overlap anything on scroll so adding padding to the bottom of the whole page, the same height as the thumbnail menu would help avoid anything from being hidden.

  11. #10
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    I have now sorted it.

    Thanks for the follow up.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:10 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com