Jquery - pagination for images inside div's - javascript

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

Related

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.

Trying to access a specific child div from a container div

I am having trouble with a little site I have been working on; I want a sort of "stream" container that holds "cards" of "content," where this "content" is some "text" as well as some "stats."
This is the HTML I currently have:
<div id="stream">
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
</div>
Eventually, I want users to be able to prepend "cards" to this "stream" as well.
Now, however, I am trying to implement some jQuery function to hide the "stats" of a card until it is clicked on. So after setting display to none in CSS of the stats, I made this in a javascript file:
$(document).ready(function(){
$("#stream, div.card").click(function() {
$(this).find($("div.stats")).show();
});
});
It sort of works; the stats of a card are hidden until I click on a card. When I click on a card, however, all the cards' stats divs are shown.
I was hoping to somehow make it that the specific card clicked is also the (only) one that gets shown. Obviously, the current way I am doing this opens all of them as jQuery I have selects all the cards at once; how can I remedy this?
Again, I apologize if this question has been asked; I could not seem to find something similar, and I really want this to work . . .
P.S. I tried to search for this particular instance; alot of suggestions were to just give divs ids, but this feels inconvenient when I eventually want users to prepend cards?
Your selector ->
"#stream, div.card"
was basically asking for all #stream and all div.card..
But what you really meant was, find all div.card inside #stream. and this would be, (aka without the ,).
"#stream div.card"
Also you jquery find doesn't require you to convert into a jquery object, so find("div.stats") will do the trick.

Bootstrap with fullpage.js

Hey i am pretty new to both bootstrap and fullpage.js, the issue i am having is the want to load multiple images using the grid system from bootstrap within one of my sections, i currently have multiple sections working however this issue with images has proved a bump in my road.
<div class="section">
<div class="jumbotron">
<div class="container">
<h1>Tree Kangaroos</h1>
<p>What are they exactly?</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col1-sm-4">
<img src="images/face.png" />
</div>
<div class="row">
<div class="col1-sm4">
<img src="images/face.png" />
</div>
</div>
</div>
</div>
</div>
This is the code i am having trouble with, everything else implemented so far with fullpage is working and there is no java script included with bootstrap(to my knowledge) so i have not shown the entirety of my code as its rather large my jumbotron is also working so i'm guessing bootstrap is working as intended and the issue is with my coding itself.
The exact issue is that my images stack on top of each other rather than horizontally.
Your problem is with your columns those are not valid bootstrap classes..
Col-md-4 is what you are looking for.

How do I put a couple of elements inside template?

I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.
Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.
Make main template which contains header, body and footer.
Add partials to the main template.
If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>

Horizontal lazy load on div with onScreen plugin

I'm trying to get the onScroll plugin working with my horizontal webpage that is something like that :
<div id="container">
<div class="column"><p>01</p></div>
<div class="column"><p>02</p></div>
<div class="column"><p>03</p></div>
<div class="column"><p>04</p></div>
<div class="column"><p>05</p></div>
<div class="column"><p>06</p></div>
<div class="column"><p>07</p></div>
<div class="column"><p>08</p></div>
<div class="column"><p>09</p></div>
<div class="column"><p>10</p></div>
</div>
Here is a jsfiddle shot of what I have : EDIT HERE IS THE LAST ONE -> http://jsfiddle.net/UcQpA/7/
My goal is to get something similar to this demo with the onScroll plugin :
http://silvestreh.github.io/onScreen/horizontal.html
Unfortunately, as the website of the demo is made with HTML5 and mine with XHTML, I don't understand how it's actually working.
Could you please help me ?
Thank you ! :)

Categories