Mobile Theme - Opening Images Within Posts

kirkpa31

I've looked at every possible related thread in this forum and can't find an answer that works. My forum consists primarily of images, so on the mobile theme when you scroll down the page you see images that are the width of the screen - that part works fine.

The issue is when a user clicks on the image, it gets larger but extends out of the screen ("This image has been resized to fit in the page. Click to enlarge") is the text under each image.

I've posted about this before here: http://vanillaforums.org/discussion/comment/175752#Comment_175752 related to the code at the bottom of global.js (that post was related to the full site - a problem that was solved with the fancybox plugin)

Ideally, when a user clicks on an image it would open up as it does in the Facebook app - it would open up in a kind of Fancybox-esque way with black above and below the image and the back button on the phone would be used to close it/user could slide from image to image.



So I have two questions here:

1) is the only way to achieve something like this using the Fancybox plugin? (I have it enabled - it's working on the full site, not the mobile one for some reason)

2) is there a bit of code I could place with the mobile theme's default.master.tpl file to enable a more user-friendly image opening process?

Using Vanilla v2.0.18.8
Mobile Theme

hgtonight

1. The fancybox plugin is probably not considered mobile friendly. You can test it out by adding 'MobileFriendly' => TRUE to the plugin info array in the main plugin file. That should make it load on the mobile theme.

2. You will need to create some type of URL change on click and handle it via JS if you want the native browser buttons to close it. There is a pretty nice jQuery plugin called Address that makes this pretty easy: http://www.asual.com/jquery/address/

kirkpa31

Thank you! I'll play around with both suggestions and let you know what I find

kirkpa31

Unfortunately the 'MobileFriendly' = TRUE did not work, I'm not very good with jQuery but I'll keep messing around with the address plugin and see if more progress is made

kirkpa31

And I know modifying core files is frowned upon, but I'm hoping there may also be a way to slightly alter this bit of code at the bottom of the global.js to fix the situation:

// Shrink large images to fit into message space, and pop into new window when clicked. // This needs to happen in onload because otherwise the image sizes are not yet known. jQuery(window).load(function() { var toggler = function(t_img, t_width) { if (t_img.css('width') == 'auto') t_img.css('width',t_width); else t_img.css('width','auto'); return false; } jQuery('div.Message img').each(function(i,img) { var img = jQuery(img); var container = img.parents('div.Message'); if (img.width() > container.width()) { var smwidth = container.width(); img.css('width', smwidth).css('cursor', 'pointer'); img.after('<div class="ImageResized">' + gdn.definition('ImageResized', 'This image has been resized to fit in the page. Click to enlarge.') + '</div>'); img.next().click(function() { return toggler(img, smwidth); }); img.click(function() { return toggler(img, smwidth); }) } }); });

hgtonight

If you must modify core files, the best possible thing is to fire an event that can be picked up by your custom code. The biggest benefit keeping the bulk of your custom code outside of the core files.

In jQuery, triggering a custom event looks like this:

jQuery(window).trigger('ImagesResized');

And catching a custom event looks like this:

$(window).bind('ImagesResized', function() {

});

P.S. This is an example of a JS event trigger that was added in the 2.1 beta. My Resized Image Lightbox plugin hooks into this trigger and adds a basic lightbox for resized images. You might find the source useful.

EDIT

@kirkpa31 said:
Unfortunately the 'MobileFriendly' = TRUE did not work, I'm not very good with jQuery but I'll keep messing around with the address plugin and see if more progress is made

I just noticed that the fancybox plugin already defines itself as being not mobile friendly. Change the MobileFriendly key to TRUE in the Plugin Info array at the beginning of the class.vanillalightbox.plugin.php file.

kirkpa31

Thank you for the tips! I'm slowly learning a little more.

I've changed within both the class.vanillafancybox.plugin.php and within the config.php to read TRUE for MobileFriendly - however this hasn't changed this responsiveness on the mobile theme

Also - you're latest lightbox plugin is only for 2.1+ so for now I'm out of luck with that route.

For now, I may play around with the global.js file to see if I can disable the feature allowing a user to "click to enlarge" within the mobile frame - so they would only be able to see the photo "as is" - and see if that messes up the full side fancybox effect.

hgtonight

I was stating that my examples came directly from a plugin I wrote that also modifies the click behavior on resized images.

If you add a custom event trigger in the global.js file (which 2.1 comes with), you can hook your js code into it by handling the event. This gives you as clean a separation as possible in terms of modifying core code.

kirkpa31

Ok! This'll be a learning experience - thanks for the guidance @hgtonight!

vrijvlinder

@kirkpa31 For mobile, the best way is to make the image open in a new window. The likely reason the fancybox does not work for you is due to possibly needing to add the class to the links on the mobile template .

Just use a jquery to make the images open in new window on mobile.Try adding one of these to the mobile tpl see if it works for you. It works for me.

$(document).ready(function() { 

$('.MessageList a').attr('target', '_blank'); 
$(".Attachment a").attr("target", '_blank');
 $(' .Message a img').attr('target', '_blank'); 

Add fancybox class to the image links in mobile

<script type="text/javascript">
$(document).ready(function() {
$(this).find(".Message a img").not('.fancybox').each(function(){
   $(this).addClass("fancybox");
   fancybox();
}); 
});
</script>

http://api.jquery.com/addClass/

kirkpa31

Awesome @vrijvlinder! Thanks this worked perfectly

kirkpa31

Ok just a quick side question related to this topic:

Can the VanillaFancybox plugin be disabled for mobile devices only? I've played around with the following code both within my config.php and within the default.php of the plugin to no avail:

$Configuration['Plugins']['VanillaFancybox']['MobileFriendly'] = FALSE

I am thinking this is a simple thing I am overlooking.

Any advice would be greatly appreciated.

vrijvlinder

You could use the same jquery but put it in the mobile theme, instead of addClass use .removeClass, try this let me know if it works

<script type="text/javascript">
$(document).ready(function() {
$(this).find(".Message a img").each(function(){
   $(this).removeClass("fancybox");

}); 
});
</script>

http://api.jquery.com/removeclass/

http://www.w3schools.com/jquery/html_removeclass.asp

peregrine

Can the VanillaFancybox plugin be disabled for mobile devices only? I've played around with the following code both within my config.php and within the default.php of the plugin to no avail:

$Configuration['Plugins']['VanillaFancybox']['MobileFriendly'] = FALSE

the config statement above above certainly won't work because you simply can't make config statements up. you have to look at the code to see if there is an applicable one. The idea of guessing config statements is not really appropriate.

But Does theVanillaFancybox  have

'MobileFriendly' => TRUE

in the $PluginInfo['VanillaFancybox'] = array(

that alone should control whether the plugin is enabled for mobile devices.

if it doesn't exist in the plugininfo the plugin should not be enabled for what it considers mobile devices.