We Keep Coding

Adding background color in TurnJS

I have experienced problem I have never faced before and even googling it did not help.
I have basic code from the official page of script TurnJS, which is the problem I have with.
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
This works as it should but is has transparent background so when you have any text on pages it overlays themselves so you cannot read the text properly.
When I add
#flipbook div{
background: white;
}
It somehow breaks. Pages skew when hovered etc.
I cannot insert a jsfiddle example because the link for turnjs script is not https and I am not allowed to insert http links. And here it shows me error in code.
The skewed page is shown on image below.
Does someone know how to add a bg-colorto that flipbook?
I would aprreciate any comments.

You can add another class to your pages which specifies a background colour:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div class="pageStyle"> Page 1 </div>
<div class="pageStyle"> Page 2 </div>
<div class="pageStyle"> Page 3 </div>
...
And then specify everything you need in that class. The other method is to load background images for each page. This is generally how a magazine would be created in TurnJS as it's easier to automate.
Although I just went over their docs looking for this (I know it works, I've done it before) and couldn't find much about it.

Jquery - pagination for images inside div's

I created simple image gallery and I'm looking for script or solution to make pagination for my images inside div's.
At first, it's my code.
CODEPEN.IO
My structure of gallery looks like this:
<div class="container">
<div class="main-gallery">
<div class="a-gallery">
<div class="intem-gallery">
<div class="image-gallery">
IMAGE
</div>
</div>
</div>
</div>
</div>
I found THIS jquery pagination script but it's works on different structure, like this.
<div class="parent">
<div class="child">
IMAGE
</div>
</div>
So can this script handle it with my case or maybe someone have better solution because I need to keep eg. 4 images per site. I would like to have something that will work with my structure.

look at this jQuery Pagination plugin or this one10+ jQuery Pagination Plugins. ist very easy to use. i hope it hepls

Vertical Scrolling on Links with fullPage.js

I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.

Lightbox2 Image Repeats twice when used with TinyCarousel

I am currently having problems with Lightbox2 and TinyCarousel working together!
When i add the lightbox link onto an image within the carousel it shows 2 of that image within the lightbox.
I read a similar situation with bxSlider and the solution was to change the infinite variable to false - i have tried this within tiny carousel but it does not work.
You can see the problem here: http://www.elementintermedia.com/newsite/
Click on the first image in the Slider to start the lightbox and it displays that linked image twice within the lightbox. This is the only lightbox link on the current page also.
I know it's tiny carousel casuing the problem as if i remove that plugin the lightbox works correctly and olny shows the image once
Can anyone please help?? Thanks

Lightbox2 2.7.1 and the bootstrap carousel work well together
for the buttons :
<div class="btn-group">
<a class="btn" href="#scroller" data-slide="prev">previous</a>
<a class="btn" href="#scroller" data-slide="next">next</a>
</div>
And the carousel :
<div id="scroller" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
your content here
</div>
<div class="item">
your content here
</div>
</div>
</div>
I didn't use it exactly like you (1 image per step), but I'm sure you can find a lot of usage examples on the web.

Angular JS repeater + Bootstrap Carousel

I'm trying to fill a Bootstrap Carousel component with data from AngularJS.
Basically I'm filling the items inside carousel-inner class like this:
<div class="carousel-inner">
<div class="item" ng-repeat="screen in app.screens">
<img ng-src="screens/{{screen}}" class="center"/>
</div>
</div>
Which would work fine, but at first I cannot see any picture, I think it's because none of my items has the active class.
In the official documentation:
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
The first div has "active" class, and it is visible, and when I try to write my example without Angular JS like above, it works.
How can I set the first item from ng-repeat to have the "active" class?

Use the following:
<div class="item" ng-repeat="screen in app.screens" ng-class="{active : $first}">
Here you can see which properties are exposed on the local scope.