This topic contains 4 replies, has 2 voices, and was last updated by  Shubham Kumar 11 months ago.

  • Author
    Posts
  • #2411 Reply

    Tushar

    Hello everyone,

    I have an issue with my slider to load images from the database as per the orientation of the images. I have used Cordova, javascript, jquery mobile and jssor slider to create slider.

    If I click the landscape image from device camera in my app and store that in DB and then I retrieve that image to slider. It’s working fine for landscape image. But If I click portrait image and store into DB and retrieve the image It’s stretching the image as per the slider’s size in landscape.

    Can I get any solution ASAP. Help would be appreciated.

  • #2412 Reply

    Shubham Kumar
    Keymaster

    Please provide some information about your code and I’ll try to help more!

    But still I think you can use CSS to do your task.

    Here’s a link to an answer(I think) : http://stackoverflow.com/a/17353785/4722288 and http://www.w3schools.com/css/css_rwd_images.asp

  • #2436 Reply

    Tushar

    Below you can see my code of slider.

    <div id=”jssor_1″ style=”position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 300px; overflow: hidden; visibility: hidden;”>
    <!– Loading Screen –>
    <div data-u=”loading” style=”position: absolute; top: 0px; left: 0px;”>
    <div style=”filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;”></div>
    <div style=”position: absolute; display: block; background: url(‘img/loading.gif’) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;”></div>
    </div>
    <div data-u=”slides” style=”cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 300px; overflow: hidden;”>
    <div data-p=”112.50″ style=”display: none;”>


    </div>
    <div data-p=”112.50″ style=”display: none;” class=”pinch-zoom”>

    </div>
    <div data-p=”112.50″ style=”display: none;” class=”pinch-zoom”>

    <div id=”caption1″ style=”font-family: verdana; font-weight: normal; position: absolute; bottom: 0; left: 0; color: #fff; line-height: 45px; font-size: 15px; padding-left: 10px;”></div>
    </div>
    <div data-p=”112.50″ style=”display: none;” class=”pinch-zoom”>

    <div id=”caption2″ style=”font-family: verdana; font-weight: normal; position: absolute; bottom: 0; left: 0; color: #fff; line-height: 45px; font-size: 15px; padding-left: 10px;”></div>
    </div>
    <div data-p=”112.50″ style=”display: none;” class=”pinch-zoom”>

    <div id=”caption3″ style=”font-family: verdana; font-weight: normal; position: absolute; bottom: 0; left: 0; color: #fff; line-height: 45px; font-size: 15px; padding-left: 10px;”></div>
    </div>
    </div>
    <!– Bullet Navigator –>
    <div data-u=”navigator” class=”jssorb01″ style=”bottom: 16px; right: 116px;”>
    <div data-u=”prototype” style=”width: 12px; height: 12px;”></div>
    </div>
    <!– Arrow Navigator –>
    <span data-u=”arrowleft” class=”jssora13l” style=”top: 0px; left: 30px; width: 40px; height: 50px;” data-autocenter=”2″></span>
    <span data-u=”arrowright” class=”jssora13r” style=”top: 0px; right: 30px; width: 40px; height: 50px;” data-autocenter=”2″></span>
    </div>

  • #2448 Reply

    Shubham Kumar

    You haven’t mentioned in which div you are adding images in your slider. Please mention.

  • #2449 Reply

    Shubham Kumar

    If you are adding image under div[data-u=”slides”]. Then add this CSS code in your HTML.


    div[data-u=”slides”]>div{
    text-align:center; //To centre the image
    width: 100%;
    height:100%;
    }
    div[data-u=”slides”] img{
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto;
    display: inline-block;
    }

    Hope it will help.

Reply To: Issue with fetching the image in slider as per the image orientation
Your information: