How to make a video gallery using append() in JQuery?

JavaScript
1

Hi there

this is my jsfiddle

I want to make a video gallery using javaScript and Css also.
How to add all blocks horizontally and when a block ends then start from next line

How can I acheive this?

Thanks

2

Check if this works for you - Demo

3

this is somewhat write that I was thinking

I will try this according to my requirement and later reply
but why it is not appending 3 blocks it just append one block only?

4

anybody help on this topic

5

Hi although this post is very old
but Here I am trying to make a gallery by above codes

But its not working you can see I am trying to align Image Blocks in left to right but it only shows in vertically align

How to handle this seneraio?

6

And here you can also see block is not adding 3 times here

7

You’re applying style to the div.imageBlock but clone only it’s content.
When you call $('.something').html() it returns whats inside the block, without the wrapper.
For example:

<div class="foo">Here is content</div>

$('.foo').html() // => "Here is content"

For your case there is .clone() method that copies whole block (wrapper and content).

8

Ok thanks @megazoid

One more question you have defined a class name as “imageBlock-template”

and in the CSS file you are specify and applying css like this

div.imageBlock{

}

so my question is there is not any imageBlock class so how this CSS apply on this?

I hope you got my point

9

There is two classes in my example (scroll the CSS pane if you don’t see second one):

div.imageBlock { 
    float: left;
    margin: 0 10px;    
    background-color:"#FFF099";
}

div.imageBlock-template {
    display:none;    
}

When we want to make new imageBlock we copy template and swap the classes:

var newBlock = $(".imageBlock-template").clone();
newBlock.removeClass('imageBlock-template').addClass('imageBlock'); // -- Swap classes
$(".images").append(newBlock);

That approach allows us to not to worry about template block when we select our images with $('.imageBlock')

10

I can understand this

but there is not any imageBlock class in your HTML code?

11

We’re creating them dynamically in the loop

12

Ok ya now its clear

Thanks

13

Is there any way so that I can set imageBlock css while creating it not previously on some file?

14

You can use .css() method to add inline styles to new block when creating it

15

awesome

see my code for adding it

16

Thanks

there is one more Issue when I integrate this code with my whole code it looks like this

I am trying to add all blocks under the “main-content” class but they are overlapping in my footer class to

let me explain there is 3 class in my case one is
“top-header”,“main-content”,“footer”

I am trying to add all my gallery code under the main-content area but it is spreading till the bottom.And it overlap with footer section.How to fix this?

17

That’s happening because your .main-content has floating childs.
Solution: add overflow:hidden to .main-content
You can learn more here about this problem.

18

@megazoid

Thanks awesome help

this is my code

19

I have some more question on this

suppose I am playing a video using HTML video tag like this

"<video controls>
<source src="myPath" type="video/mp4">
</video>"

Now problem is

  1. when I set full path on video src tag video fully is not loaded

like suppose a video is of length 10:00 and I want to jump to at 05:00 is it possible to do with video tag

so that without playing the whole video I can jump to 05:00 parts?

and there is one more problem

2)As you can see when their is short window available then at that time “Home”,“MyProfile”,“Gallery”,
“Video”,“Upload CV” are inside red block
but content of topImageBlock are not inside it it goes out of that block

How to fix this issue?

20

anyone is this?