It is currently Fri Dec 15, 2017 2:14 pm

All times are UTC + 1 hour [ DST ]




Post new topic Reply to topic  [ 20 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Wed Jan 16, 2013 10:12 pm 
Offline

Joined: Wed Jan 16, 2013 9:58 pm
Posts: 6
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?


Top
 Profile  
 
 Post subject: Fancybox with touch/swipe support (Photoswipe)
PostPosted: Wed Jan 16, 2013 10:12 pm 
Top  
PostPosted: Thu Jan 17, 2013 7:39 pm 
Offline
Developer
Developer
User avatar

Joined: Sat Aug 14, 2010 9:31 pm
Posts: 1241
Location: Novi Sad, Serbia
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 :)

_________________
Help Admiror Gallery become even better,
give us a review on JED


Top
 Profile  
 
PostPosted: Sun May 05, 2013 8:01 pm 
Offline

Joined: Wed Jan 16, 2013 9:58 pm
Posts: 6
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:
<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:
$(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:
<?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.


Top
 Profile  
 
PostPosted: Mon May 13, 2013 10:39 am 
Offline
Developer
Developer
User avatar

Joined: Sat Aug 14, 2010 9:31 pm
Posts: 1241
Location: Novi Sad, Serbia
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?

_________________
Help Admiror Gallery become even better,
give us a review on JED


Top
 Profile  
 
PostPosted: Sun May 26, 2013 1:54 pm 
Offline

Joined: Wed Jan 16, 2013 9:58 pm
Posts: 6
Here is the file: http://we.tl/f7tCuBrX78
I could not upload it here, it's just over 1 MB.


Top
 Profile  
 
 Post subject: Re: Fancybox with touch/swipe support
PostPosted: Sun May 26, 2013 1:54 pm 
Top  
PostPosted: Tue Jun 11, 2013 6:54 pm 
Offline

Joined: Wed Jan 16, 2013 9:58 pm
Posts: 6
Could you have a quick look please?


Top
 Profile  
 
PostPosted: Tue Jun 18, 2013 6:09 pm 
Offline
Developer
Developer
User avatar

Joined: Sat Aug 14, 2010 9:31 pm
Posts: 1241
Location: Novi Sad, Serbia
I will try to do this today, let you if I make any progress.

_________________
Help Admiror Gallery become even better,
give us a review on JED


Top
 Profile  
 
PostPosted: Tue Jun 18, 2013 8:14 pm 
Offline
Developer
Developer
User avatar

Joined: Sat Aug 14, 2010 9:31 pm
Posts: 1241
Location: Novi Sad, Serbia
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 :)
Attachment:
photoswipe.zip [53.48 KiB]
Downloaded 660 times

_________________
Help Admiror Gallery become even better,
give us a review on JED


Top
 Profile  
 
PostPosted: Mon Jul 01, 2013 8:58 pm 
Offline

Joined: Wed Jan 16, 2013 9:58 pm
Posts: 6
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


Top
 Profile  
 
 Post subject: Re: Fancybox with touch/swipe support (Photoswipe)
PostPosted: Mon Jul 01, 2013 8:58 pm 
Top  
PostPosted: Tue Jul 02, 2013 8:21 am 
Offline
Developer
Developer
User avatar

Joined: Sat Aug 14, 2010 9:31 pm
Posts: 1241
Location: Novi Sad, Serbia
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:
// 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:
$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 :)

_________________
Help Admiror Gallery become even better,
give us a review on JED


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 20 posts ]  Go to page 1, 2  Next

 


All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron

This is the official Admiror Joomla! Community Forum. You are welcome to join the Admiror Joomla! Community. All Admiror Joomla! Extensions Users, Joomla! Developers, PHP or mySQL Developers are welcome to support & contribute to Admiror Joomla! Projects.

Joomla! is a free and open source content management system (CMS) for publishing content on the World Wide Web and intranets. With a vibrant volunteer community, user-friendly features and plenty of power, Joomla is perfect for your website!

Joomla! is written in PHP, uses object-oriented programming (OOP) techniques and software patterns, stores data in a MySQL database, and includes features such as page caching, RSS feeds, printable versions of pages, news flashes, blogs, polls, search, and support for language internationalization.

Joomla! is the property of Open Source Matters, Inc. All rights reserved. Read more about Joomla! at http://www.joomla.org/.


Protected by Anti-Spam ACP Powered by phpBB® Forum Software © phpBB Group