Code Sample: JavaScript

This script powered a simple mobile photo gallery on my photography portfolio. The script allows for swiping and rotation, and fades out when you tap on the screen to close the gallery. This script is no longer being used on the photography portfolio, as the website was recently redesigned.

1$('document').ready(function() {

2    

3    // ###  FUNCTION TO DISABLE SCROLLING  ### //

4    function disableScrolling() {

5        $('body').bind('touchmove', function(e) {

6            e.preventDefault();

7        });

8    }   // end function

9    

10    /*function getWindowDimensions() {

11       var wdt = $(window).width();

12       var hgt = $(window).height();

13       var dimensions = [wdt, hgt];

14       return dimensions;

15    }*/  // end function

16    

17    function orientImage(myImage, wdt, hgt) {

18       if (window.orientation == 0) {   // Portrait

19            if (myImage.height > myImage.width) {

20                $('#overlay img').css({

21                    'width' : wdt,

22                    'height' : wdt * 1.5

23                })

24            } else {

25                $('#overlay img').css({

26                'width': wdt,

27                'height': wdt / 1.5,

28                });

29            }   // end if

30            

31            $('#overlay').css({

32                'padding-bottom': '300px'

33            })

34            

35        } else {   // Landscape

36            if (myImage.height > myImage.width) {

37                $('#overlay img').css({

38                    'height' : hgt,

39                    'width' : hgt / 1.5

40                })

41            } else {

42                $('#overlay img').css({

43                    'height': hgt,

44                    'width': hgt * 1.5,

45                });

46            }

47            

48            $('#overlay').css({

49                'padding-bottom': '0'

50            })

51        }

52    }

53    

54    

55    // ###  FUNCTION TO SIZE IMAGE IN WINDOW ON A.CLICK  ### //

56    function imageSizeClick() {

57        var wdt = $(window).width();

58        var hgt = $(window).height();

59        

60        var theImg = new Image();

61        theImg.src = img;

62        orientImage(theImg, wdt, hgt);

63    }   // end function

64    

65    

66    // ###  FUNCTION TO SIZE IMAGE IN WINDOW ON SWIPE LEFT  ### //

67    function imageSizeLeft() {

68        var wdt = $(window).width();

69        var hgt = $(window).height();

70        

71        var theImg = new Image();

72        theImg.src = path + '/pictures/picture-' + nextPic + '.jpg';

73        

74        orientImage(theImg, wdt, hgt);

75    }   // end function imageSizeLeft

76    

77    

78    // ###  FUNCTION TO SIZE IMAGE IN WINDOW ON SWIPE RIGHT  ### //

79    function imageSizeRight() {

80        var wdt = $(window).width();

81        var hgt = $(window).height();

82        

83        var theImg = new Image();

84        theImg.src = path + '/pictures/picture-' + prevPic + '.jpg';

85        

86        orientImage(theImg, wdt, hgt);

87    }   // end function imageSizeRight

88    

89    

90    // ###  FUNCTION TO SIZE IMAGE IN WINDOW ON PHONE ROTATION  ### //

91    function imageSizeRotation() {

92        var wdt = $(window).width();

93        var hgt = $(window).height();

94        

95        var theImg = new Image();

96        theImg.src = path + '/pictures/picture-' + currentPic + '.jpg';

97        

98        orientImage(theImg, wdt, hgt);

99    }   // end function imageSizeRotation

100    

101    

102    

103    

104    function imageSize(direction) {

105        var wdt = $(window).width();

106        var hgt = $(window).height();

107        

108        var theImg = new Image();

109        

110        switch(direction) {

111           case "click":

112              theImg.src = img;

113              break;

114           case "left":

115              theImg.src = path + '/pictures/picture-' + nextPic + '.jpg';

116              break;

117           case "right":

118              theImg.src = path + '/pictures/picture-' + prevPic + '.jpg';

119              break;

120           default:

121              theImg.src = path + '/pictures/picture-' + currentPic + '.jpg';

122        }  // end switch

123        

124        orientImage(theImg, wdt, hgt);

125    }  // end function

126    

127    

128    

129    

130    // ###  DEFINE VARIABLES FOR YEAR/MONTH/DAY  ### //

131    var urlArray = window.location.pathname.split('/');

132    var yr = urlArray[3];

133    var mo = urlArray[4];

134    var day = urlArray[5];

135    var album = urlArray[6];

136    var path = '/media/photos/all-photos/' + yr + '/' + mo + '/' + day + '/' + album;

137    

138    $('#overlay').hide();

139    

140    

141    // ###  MAKE LINK FOR LOGO GO TO HOME PAGE  ### //

142    $('.mgp1, .mgp2').click(function(evt) {

143        evt.preventDefault();

144        window.location = '/';

145    })

146    

147    

148    // ###  CLICK ON IMAGE TO DISPLAY IT FUNCTION  ### //

149    $('#mAlbum a').click(function(evt) {

150        evt.preventDefault();

151        img = $(this).attr('href');   // global variable (current picture being viewed)

152        

153        $('#overlay img').attr('src', img).fadeIn();

154        var wdt = $(window).width();

155        var hgt = $(window).height();

156        $('#overlay').show();

157        

158        $('#overlay').css({

159            'width': wdt,

160            'height': hgt,

161            'margin-top': $(window).scrollTop() + 'px'

162        });

163        

164        disableScrolling();

165        //imageSizeClick();

166        imageSize("click");

167        

168        // define variables for first and next picture

169        pattern = /picture-[0-9]+/;   // look for picture-xx

170        imgName = img.match(pattern).toString();

171        currentPic = Number(imgName.slice(-2));

172        if (currentPic < 0) {

173            currentPic = currentPic * (-1);

174        }

175        nextPic = currentPic + 1;

176        prevPic = currentPic - 1;

177        

178        if (currentPic == 1) {

179            $('#overlay img').attr('alt', 'Beginning of Album');

180        } else if (currentPic == $('a').length) {

181            $('#overlay img').attr('alt', 'End of Album');

182        }

183    }); // end on a.click

184    

185    

186    // ###  SWIPE LEFT  ### //

187    $('#overlay img').off().on('swipeleft', function() {

188        $('#overlay img').hide().attr('src', path + '/pictures/picture-' + nextPic + '.jpg').fadeIn();

189        

190        //imageSizeLeft();

191        imageSize("left");

192        

193        if (currentPic >= $('img').length) {

194            $('#overlay img').attr('alt', 'End of Album');

195        } else {

196            currentPic = currentPic + 1;

197            nextPic = nextPic + 1;

198            prevPic = prevPic + 1;

199        }

200    })  // end on swipe left

201    

202    

203    // ###  SWIPE RIGHT  ### //

204    $('#overlay img').on('swiperight', function() {

205        $('#overlay img').hide().attr('src', path + '/pictures/picture-' + prevPic + '.jpg').fadeIn();

206        

207        //imageSizeRight();

208        imageSize("right");

209        

210        if (currentPic < 1) {

211            $('#overlay img').attr('alt', 'Beginning of Album');

212        } else {

213            currentPic = currentPic -1;

214            nextPic = nextPic - 1;

215            prevPic = prevPic - 1;

216        }

217    })  // end on swipe right

218    

219    

220    // ###  ORIENTATION CHANGE AND PHONE ROTATION  ### //

221    $(window).off().on('orientationchange', function() {

222        if ($('#overlay').is(':visible')) {

223            disableScrolling();

224        }

225        

226        var wdt = $(window).width();

227        var hgt = $(window).height();

228        

229        $('#overlay').css({

230            'width': wdt,

231            'height': hgt,

232            'margin-top': $(window).scrollTop() + 'px'

233        });

234        

235        //imageSizeRotation();

236        imageSize();

237    });   // end on orientation change

238        

239    $('#overlay').click(function() {

240        $(this).fadeOut();

241        $('body').unbind('touchmove');   // re-enable scrolling

242    });

243    

244}); // end ready