Admiror Joomla! Community

Posted: **Wed Jan 16, 2013 10:12 pm**

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?

Posted: **Thu Jan 17, 2013 7:39 pm**

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

Posted: **Sun May 05, 2013 8:01 pm**

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.

Posted: **Mon May 13, 2013 10:39 am**

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?

Posted: **Sun May 26, 2013 1:54 pm**

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

Posted: **Tue Jun 11, 2013 6:54 pm**

Could you have a quick look please?

Posted: **Tue Jun 18, 2013 6:09 pm**

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

Posted: **Tue Jun 18, 2013 8:14 pm**

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 2962 times

Posted: **Mon Jul 01, 2013 8:58 pm**

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

Posted: **Tue Jul 02, 2013 8:21 am**

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

Admiror Joomla! Community

Fancybox with touch/swipe support (Photoswipe)

Fancybox with touch/swipe support (Photoswipe)

Re: Fancybox with touch/swipe support

Re: Fancybox with touch/swipe support

Re: Fancybox with touch/swipe support

Re: Fancybox with touch/swipe support

Re: Fancybox with touch/swipe support

Re: Fancybox with touch/swipe support

Re: Fancybox with touch/swipe support

Re: Fancybox with touch/swipe support (Photoswipe)

Re: Fancybox with touch/swipe support (Photoswipe)