Fancybox with touch/swipe support (Photoswipe)

[catsix]

I would like to incorporate touch functionality with the fancybox popup for smartphones and tablets.
I found several ways to upgrade fancybox like this one: https://github.com/rytikovCode/fancyBox
When trying to merge it with the admiror plugin I stumble upon some difficulties.
Anyone already performed this kind of functionality?

[Admiror Joomla! Sponsor]

[Vasiljevski]

There is a few request, so far, for touch/swipe support and I would help in any way I can

You can e-mail me, or post here what problems you have encountered with this and I might have some ideas how to solve them

[catsix]

Unfortunatly I'm not really getting anywhere. Posting a job on oDesk did not get any result either and I am not a real web scripter.
So I thought I would try to install a new pop up all together so maybe I need to open another topic. Photoswipe seems to be straight forward and working with jQuery calls. (photoswipe.com)

What I did:
I copied all the script files into a new popup folder.
Created the details.xml and index.php files
The functioanality inside Admirorgallery is working and I can select the popup from the control panel

Requirements from the plugin:
-Files to include

Code: Select all

<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>

-Calling the script:

Code: Select all

$(document).ready(function(){

	var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

});

I am not sure about this as the jQuery is loaded inside the Admirorgallery lauched from javascript and this one is looking for the element id also.

The popup index.php file:

Code: Select all

<?php
// Joomla security code
defined('_JEXEC') or die('Restricted access');

// Load JavaScript from current popup folder
$this->loadJS($this->currPopupRoot . 'lib/klass.min.js');
$this->loadJS($this->currPopupRoot . 'code.photoswipe-3.0.5.min.js');

// Load CSS from current popup folder
$this->loadCSS($this->currPopupRoot . 'photoswipe.css');

// Set REL attribute needed for Popup engine
$this->popupEngine->rel = 'photoswipe[AdmirorGallery' . $this->getGalleryID() . ']';

// Insert JavaScript code needed to be loaded after gallery is formed
$this->popupEngine->endCode = '
<script type="text/javascript" charset="utf-8">
        AG_jQuery("a[rel=' . $this->popupEngine->rel . ']").photoswipe({
		 \'enableMouseWheel\' : \'false\',
		 \'enableKeyboard\' : \'false\'
        });
</script>
';
?>

When looking at the page source it's loading all the necessary files, but I think the JQuery is not properly initiated or something. When clicking the image it just opens in a new window.
I've checked the dev handbook.

[Vasiljevski]

Yes, it seems that you have some error in javascript preventing the Photoswipe to work properly.

Can you send me the popup folder you created to check and see what is happening?

[catsix]

Here is the file: http://we.tl/f7tCuBrX78
I could not upload it here, it's just over 1 MB.

[Admiror Joomla! Sponsor]

[catsix]

Could you have a quick look please?

[Vasiljevski]

I will try to do this today, let you if I make any progress.

[Vasiljevski]

I think I made it work

At least it works at my side.

Here it is, check and let me know if it works at your side

photoswipe.zip

(53.48 KiB) Downloaded 2961 times

[catsix]

Indeed, it's working. COOL! Would be a nice addition to the existing pop ups I think.
You know what went wrong or you just started from scratch? :p
NOTE: In the mean time I have upgraded to 4.5

[Admiror Joomla! Sponsor]

[Vasiljevski]

Everything was OK, just needed a change in index.php, $this->popupEngine->endCode declaration was wrong.

Photoswipe has a little different way of initializing on the page that Pirobox

So I changed this part:

Code: Select all

// Insert JavaScript code needed to be loaded after gallery is formed
$this->popupEngine->endCode = '
<script type="text/javascript" charset="utf-8">
        AG_jQuery("a[rel=' . $this->popupEngine->rel . ']").photoswipe({
		 \'enableMouseWheel\' : \'false\',
		 \'enableKeyboard\' : \'false\'
        });
</script>
';

with this one:

Code: Select all

$this->popupEngine->endCode = '	
<script type="text/javascript">
    (function(window, PhotoSwipe){		
        document.addEventListener(\'DOMContentLoaded\', function(){
            var options = { enableMouseWheel: false , enableKeyboard: false },
            instance = PhotoSwipe.attach( window.document.querySelectorAll(\'#AG_01 a\'), options );
        }, false);
    }
    (window, window.Code.PhotoSwipe));
</script>		
';

I also removed unused files to make the zip smaller