Scroll page back to the top

ssdLight : Simple Lightbox with jQuery

ssdLight : Simple Lightbox with jQuery

In this series we will create a lightbox with jQuery called ssdLight. Lightbox allows us to show the large image with the background of the page faded out. Our finished product is called ssdLight and is compatible with all major browsers.

JavaScript Tutorial

Sebastian Sulinski on 3rd Oct 2011

Download Exercise FilesDemo
 
 

01 : Gallery structure (03:45 min)

1  
 

02 : Stylesheet (05:28 min)

2  
 

03 : Styling lightbox (06:32 min)

3  
 

04 : ssdLight object (07:19 min)

4  
 

05 : liveClose method (04:01 min)

5  
 

06 : JavaScript Image Object (04:51 min)

6  
 

07 : Resize method (02:09 min)

7  
 

08 : Paging method (04:16 min)

8  
 

09 : Show lightbox (04:38 min)

9  
 

10 : Show title (02:51 min)

10  
 

11 : Bindings and position methods (04:55 min)

11  
 

12 : Replace image (04:37 min)

12  
 

13 : loadImage method (04:24 min)

13  
 

14 : resizeAnimate method (04:40 min)

14  
 
 
 
 

Discussion (3 comments)

  • Steve

    Steve : @hippoxx on Monday, 12th December 2011

    Thank you.
    This is the second time that I have found what I was looking for here. I used your scroll to top solution on my own website. Have just used this solution in a WordPress theme that I'm just about to set up for a friend. Click my name to see it in action.
    I did have a very minor issue with text appearing on the navigation buttons but I removed the image titles from the jQuery and all is fine now.
    Thank's again, your website is a great resource. Will be back for sure.

    Reply

  • eyveth

    eyveth on Friday, 1st June 2012

    thanx for sharing!

    Reply

  • kobalt7

    kobalt7 on Thursday, 6th February 2014

    2 questions, how can i resize the image in cases of mobile viewing where the image is larger then the window?

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 11th February 2014

    Hi Kobalt,
    The easiest way would be to remove the width and height attributes of the image and let it resize itself, however with the lightbox that might not work. What you could do is to try something like this:

    $(window).on('resize load', function() {
    
    	var maxWidth = $(this).width();
    	var maxHeight = $(this).height();
    	
    	$('img').css({ 'maxWidth' : maxWidth, 'maxHeight' : maxHeight });
    
    });
    

    Reply

 
Page 1 of 1
  • First
  • Previous
  • 1
  • Next
  • Last
 
 
Add a comment
Add Comment