Permalink
Browse files

v1.0.5

  • Loading branch information...
1 parent 363e226 commit 03d80a6b978c13a4b5187c239000b270abd922f1 Code Computerlove committed Apr 28, 2011
View
@@ -62,7 +62,7 @@ There are two distributions of the library:
It is recommended for WebKit based mobile devices to use the default distribution. This distribution will run faster. It does not require jQuery (so one less library to download to your mobile device). It also uses CSS3 to achieve animation effects. This is extremely noticable when running on an iOS device as animation will use hardware acceleration and will feel more "native" to the device. The default distribution will also work on desktop WebKit browsers (such as Chrome and Safari) as well as Firefox.
-Use the jQuery distibution if you need to support a wider range of browsers such as Internet Explorer etc. By default, this distributionn will not use hardware acceleration for animation on iOS devices so is noticably slower. You can however override the default animation functionality in jQuery by including the excellent [Animate Enhanced](https://github.com/benbarnett/jQuery-Animate-Enhanced) library.
+Use the jQuery distibution if you need to support a wider range of browsers such as Internet Explorer etc. By default, this distribution will not use hardware acceleration for animation on iOS devices so is noticably slower. You can however override the default animation functionality in jQuery by including the excellent [Animate Enhanced](https://github.com/benbarnett/jQuery-Animate-Enhanced) library (example included).
Both default and jQuery distribution come with a jQuery plugin wrapper to bind elements to the gallery. So for the default distribution, if you really need to, you can still use jQuery to find your images in your HTML document, hook into the jQuery DOM ready event and use the jQuery PhotoSwipe plugin to display the library. The gallery will still be running on the default optimised engine, but you have the convience of jQuery to set things up should you need to.
@@ -156,6 +156,16 @@ Options
- **getImageCaption**: Like "getImageSource", function to specify how the gallery obatins image captions. By default, the gallery looks for an image's "alt" tag.
+
+-- **getImageMetaData**: Function to associated additional meta data against an image in the gallery. This meta data can then be used in your own code if you listen to the "onDisplayImage" event.
+
+ getImageMetaData: function(el){
+
+ return {
+ longDescription: el.getAttribute(el, 'data-long-description')
+ }
+
+ }
Keyboard controls for desktop browsers
View
@@ -5,7 +5,7 @@
project.description = PhotoSwipe
project.src.dir = src
-project.build.version = 1.0.4
+project.build.version = 1.0.5
project.build.year = 2011
project.build.workdir = work
View
@@ -107,6 +107,9 @@
<param name="filePath" value="${project.build.workdir}/examples/jquery-engine.html"/>
</antcall>
<antcall target="versionStamp">
+ <param name="filePath" value="${project.build.workdir}/examples/jquery-engine-animate-enhanced.html"/>
+ </antcall>
+ <antcall target="versionStamp">
<param name="filePath" value="${project.build.workdir}/examples/advanced-setup.html"/>
</antcall>
<antcall target="versionStamp">
View
@@ -47,7 +47,7 @@ Major update:
- Reduced the number of times the internal function "resetPosition" was being fired
-- Fixed issue with show and hide of toolbar / caption. Has occasionally locking up.
+- Fixed issue with show and hide of toolbar / caption. Has occasionally locking up
- Now compliled with Google Closure. Overall smaller file size
@@ -60,8 +60,30 @@ Major update:
- Fixed issue2. Can now click on "clickable" elements added to a caption on touch screen devices
-- Speed improvements for Android and Blackberry devices.
+- Speed improvements for Android and Blackberry devices
-- "Flicker" when using toolbar buttons to show next and previous on Android devices fixed.
+- "Flicker" when using toolbar buttons to show next and previous on Android devices fixed
+
+
+
+1.0.5 28.04.11 - Ste Brennan
+----------------------------
+
+- Fixed lack of hardware acceleration when running via UIWebView or running as a full screen web app in iOS devices
+
+- Fixed device orientation issue with Android
+
+- Added custom "meta data" that can be attached to each full size image
+
+- Now runs with jquery.animate-enhanced [https://github.com/benbarnett/jQuery-Animate-Enhanced]. This addes hardware acceleration if using the jQuery DOM engine and jQuery animate functions
+
+- Fixed issues with touch events and the jQuery engine. These issues where introduced in v1.0.4.
+
+- Added the following new events:
+
+ - onBeforeShow
+ - onBeforeHide
+ - onBeforeCaptionAndToolbarShow
+ - onBeforeCaptionAndToolbarHide
View
@@ -9,8 +9,17 @@
<script type="text/javascript" src="../lib/simple-inheritance.js"></script>
<script type="text/javascript" src="../util.js"></script>
+
<script type="text/javascript" src="../util-dom.js"></script>
<script type="text/javascript" src="../util-animation.js"></script>
+
+ <!--
+ <script type="text/javascript" src="../lib/jquery-1.5.1.min.js"></script>
+ <script type="text/javascript" src="../util-dom-jQuery.js"></script>
+ <script type="text/javascript" src="../lib/jquery.animate-enhanced.min.js"></script>
+ <script type="text/javascript" src="../util-animation-jQuery.js"></script>
+ -->
+
<script type="text/javascript" src="../event-class.js"></script>
<script type="text/javascript" src="../element-class.js"></script>
<script type="text/javascript" src="../full-size-image-class.js"></script>
@@ -44,13 +53,27 @@
// Add event listeners
+ // onBeforeShow
+ Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeShow, function(e){
+
+ console.log('onBeforeShow');
+
+ });
+
// onShow
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShow, function(e){
console.log('onShow');
});
+ // onBeforeHide
+ Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){
+
+ console.log('onBeforeHide');
+
+ });
+
// onHide
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onHide, function(e){
@@ -100,10 +123,17 @@
});
- // onCaptionAndToolbarShow
- Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onCaptionAndToolbarShow, function(e){
+ // onBeforeCaptionAndToolbarShow
+ Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
+
+ console.log('onBeforeCaptionAndToolbarShow');
+
+ });
+
+ // onBeforeCaptionAndToolbarHide
+ Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
- console.log('onCaptionAndToolbarShow');
+ console.log('onBeforeCaptionAndToolbarHide');
});
View
@@ -16,19 +16,29 @@
/*
This example shows how to listen and respond to gallery events.
+ - onBeforeShow: Just before the gallery is displayed
- onShow: When the gallery is displayed
+ - onBeforeShow: Just before the gallery is hidden
- onHide: When the gallery is hidden
- onShowNext: When the gallery has been issued the command to show the next image
- onShowPrevious: When the gallery has been issued the command to show the previous image
- onDisplayImage: When the gallery displays an image. Typically fired after onShowNext and onShowPrevious
- onResetPosition: When the gallery resets the size and position of itself. Typically fired after device orientation change or window resize
- onSlideshowStart: When the gallery has started the slideshow
- onSlideshowStop: When the gallery has stopped the slideshow
+ - onBeforeCaptionAndToolbarShow: Just before the caption / toolbar is faded in
+ - onBeforeCaptionAndToolbarHide: Just before the caption / toolbar is faded out
*/
document.addEventListener('DOMContentLoaded', function(){
+ // onBeforeShow
+ Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeShow, function(e){
+
+ console.log('onBeforeShow');
+
+ });
// onShow
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShow, function(e){
@@ -37,6 +47,13 @@
});
+ // onBeforeHide
+ Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){
+
+ console.log('onBeforeHide');
+
+ });
+
// onHide
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onHide, function(e){
@@ -86,6 +103,20 @@
});
+ // onBeforeCaptionAndToolbarShow
+ Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
+
+ console.log('onBeforeCaptionAndToolbarShow');
+
+ });
+
+ // onBeforeCaptionAndToolbarHide
+ Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
+
+ console.log('onBeforeCaptionAndToolbarHide');
+
+ });
+
Code.photoSwipe('a', '#Gallery');
@@ -0,0 +1,119 @@
+<!DOCTYPE html><html>
+<head>
+ <title>PhotoSwipe</title>
+ <meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
+ <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
+ <link href="styles.css" type="text/css" rel="stylesheet" />
+
+ <link href="../photoswipe.css" type="text/css" rel="stylesheet" />
+
+ <script type="text/javascript" src="../lib/jquery-1.5.1.min.js"></script>
+ <script type="text/javascript" src="../lib/simple-inheritance.min.js"></script>
+ <script type="text/javascript" src="../lib/jquery.animate-enhanced.min.js"></script>
+
+ <!-- NOTE: including the jQuery engine version -->
+ <script type="text/javascript" src="../code-photoswipe-jQuery-%%version%%.min.js"></script>
+
+
+ <script type="text/javascript">
+
+ /*
+ This example uses the jQuery engine for PhotoSwipe. By default, this
+ does not use hardware acceleration. However, in this example, we use
+ the jQuery animate enhanced plugin to achieve this
+ */
+
+ $(document).ready(function(){
+
+ $("#Gallery a").photoSwipe();
+
+ });
+
+ </script>
+
+</head>
+<body>
+
+<div id="Header">
+ <a href="http://www.codecomputerlove.com"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" /></a>
+</div>
+
+<div id="MainContent">
+
+ <div class="page-content">
+ <h1>PhotoSwipe</h1>
+ </div>
+
+
+ <div id="Gallery">
+
+ <div class="gallery-row">
+
+ <div class="gallery-item"><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="" /></a></div>
+
+ </div>
+
+
+ <div class="gallery-row">
+
+ <div class="gallery-item"><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" /></a></div>
+
+ </div>
+
+ <div class="gallery-row">
+
+ <div class="gallery-item"><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" /></a></div>
+
+ </div>
+
+ <div class="gallery-row">
+
+ <div class="gallery-item"><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" /></a></div>
+
+ </div>
+
+ <div class="gallery-row">
+
+ <div class="gallery-item"><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" /></a></div>
+
+ <div class="gallery-item"><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" /></a></div>
+
+ </div>
+
+ </div>
+
+
+</div>
+
+
+<div id="Footer">
+ <p><small>&copy; 2011 Code Computerlove Ltd - new media agency / digital marketing agency</small></p>
+
+ <div id="SocialLinks">
+ <a href="http://blog.codecomputerlove.com/"><img src="images/blogicon.png" width="32" height="32" alt="Blog" /></a>
+ <a href="http://www.twitter.com/computerlovers"><img src="images/twittericon.png" width="32" height="32" alt="Twitter" /></a>
+ <a href="http://www.facebook.com/CodeComputerlove"><img src="images/facebookicon.png" width="32" height="32" alt="Facebook" /></a>
+ <a href="http://www.flickr.com/photos/codecomputerlove"><img src="images/flickricon.png" width="32" height="32" alt="Flickr" /></a>
+</div>
+</div>
+
+</body>
+</html>

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 03d80a6

Please sign in to comment.