Help me in this image gallary + slideshow code please!

JavaScript
1

Greetings,

I don’t know where to start…but what I want to create is a slideshow like Netflix!
See these movies image covers?
When you hover over the image, it increases a little bit in size
it’s like…a row of images and it’s a slideshow…check out Netflix to understand more.

That’s what I wanna create. PLUS when I click on an image cover, I want it to expand/open an image gallery within it.

more like a image cover that is a FOLDER, and within it is a group of images, like categories!

2

I’m not familiar with Netflix, but you could look at something like http://highslide.com/, which has options to do what you wnt (if I’ve understood correctly).

1 Like
3

Hey,

I want something like this:

1658×570 1.08 MB

See that arrow? you click it and these covers move left, more like a slider. Also when you click on a cover, it popup an image gallery. That’s what I want to code

4

Please someone help???

It appears I can’t do alone, need a help!

5

You’re more likely to get help if you show you’ve tried to make a start on this yourself, rather than simply waiting for somebody to provide a complete solution. So post whatever code you have so far and explain where your current difficulty is. The Highslide script I linked to has options for a gallery opening from a single thumbnail, which is what you wanted and would at least give you a starting point. (I’m sure there are others, if you search for them.)

6

Ok, so far I’ve done this, but it’s not working, Need more help please?

$(document).ready(function() {
        $("#next").click(function() {
            $(".slide").animate('slide',{direction:'right'},1000);
        });
    });

Here is the HTML:

<section class="container-fluid section-project" id="project">
    <div class="row">
       <div>
        <b class="col-lg-10
                  col-md-10
                  col-sm-10
                  col-xs-10
                  col-lg-push-1
                  col-md-push-1
                  col-sm-push-1
                  col-xs-push-1 b2">Projects</b>
       </div>
   </div>
<br>
   <div class="row">
       <!-------- SlideShow -------->
       <div class="col-lg-11
                   col-md-11
                   col-sm-11
                   col-xs-11">
                   <table class="img-slide">
       <!-------- Interior -------->
                  
                   <div class="slide col-lg-12 col-md-12 col-sm-12 col-xs-12">
                   <h2 class="interior"><b>Interior</b></h2>
                <img height="520" src="imgs/cover/wakame.png"/>
                <img height="520" src="imgs/cover/tarhati.png"/>
                <img height="520" src="imgs/cover/baytoti.png"/>
                <img height="520" src="imgs/cover/lomar.png"/>
                <img height="520" src="imgs/cover/meraki.png"/>   
      <!-------- Architecture -------->
                  <h2 class="architecture"><b>Architecture</b></h2>
               <img height="520" src="imgs/cover/inameiya.png"/>
                  </div>
                   </table>
                   
                   <button id="prev">
                       <span class="glyphicon glyphicon-chevron-left"></span>
                   </button> 
                   
                   <button id="next">
                       <span class="glyphicon glyphicon-chevron-right"></span>
                   </button> 
                   
       </div>
   </div>
</section>
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.