1

I am struggling to implement turn.js library on my responsive images. I thought that using JS libraries is easy but adapting the JS library to developer's code seems to be harder than expected.

I have written some code to show how I want the final result to look like - there is some #headings div followed by #fbook div which contains .fbookImg images. In order to make the code less messy and more readable for You, I have decided to put only one image in it.

HTML:

<div id="headings">
</div>
<div id="fbook">
  <img class="fbookImg" src="http://oi67.tinypic.com/30ue0bp.jpg" />
</div>

CSS:

#headings {
  height: 100px;
  width: 100%;
  border: solid black 1px;
}

#fbook {
  width: 100%;
  border: dashed blue 1px;
}

.fbookImg {
  height: 100%;
  width: auto !important;
  max-width: 100%;
  position: relative;
  display: block;
  margin: 0 auto;
}

In the JS section I have some code to make images more responsive

JS (turn.js and jQuery are already linked):

$(document).ready(function() {
    var a = window.innerHeight - 100;
    $('#fbook').css('height',a);
});

$(window).resize(function(){
    var b = window.innerHeight - 100;
    $('#fbook').css('height',b);
});

FYI here is the fiddle/codepen: http://codepen.io/Janos/pen/wdwzVK

I tried to put more .fbookImg images into #fbook div ...

<div id="fbook">
  <img class="fbookImg" src="http://oi67.tinypic.com/30ue0bp.jpg" />
  <img class="fbookImg" src="http://oi66.tinypic.com/jkk13o.jpg" />
</div>

... and put there the appropriate turn.js code according to the example on their official website ...

$("#fbook").turn({
    display: "single",
    autoCenter: true
});

... BUT the final result (fiddle here) is far away from what I wanted, it doesn't seem to respect my default styling at all and no effect is applied.

BB-8
  • 565
  • 2
  • 9
  • 18

1 Answers1

2

I would go for the 5th version of turn.js

They also support responsiveness way better now! Check it out!

How to fix you problem:

Get height and width of the element where your img should be shown in and apply it to your img! You can also do it as background-image described here to fit the outer element!

Felix Haeberle
  • 1,530
  • 12
  • 19
  • I don´t think the 5th release is available yet. Back to coding ... Why can´t I just let the images to have default sizes specified in css? What is the problem? Besides, I am going to add more than 10 images so I think making them with ´background-image´ is not the best choice. – BB-8 Apr 11 '17 at 10:39
  • 1
    I successfully used the 5th version in one of my client projects and it works like a charm. For more info on how to resize images see this [question](http://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div?rq=1). No duplicate posting on this. – Felix Haeberle Apr 11 '17 at 11:00