Pinch Zoom on Mobiles....and/or Colorbox ?

9 posts / 0 new
Last post
zeitwarp
zeitwarp's picture
Pinch Zoom on Mobiles....and/or Colorbox ?

Hi
I have added colorbox integration to the product image display, and have a nice pop-up gallery working on desktop & tablet displays.

However...the colorbox won't launch on a mobile...and the images just link back to the same page...rather than to an enlarged image.

Basically...I would like the capability for users to view an enlarged image on a mobile....where you most need it,

So....is there a way to get Colorbox to launch on the mobile display....or...is there a simple way to add pinch/zoom functionality to the theme ?

Thanks

zeitwarp
zeitwarp's picture
Also....

Fyi...I have updated colorbox...and also turned off the new "mobile detection" setting at admin/config/media/colorbox and have patched the JS colorbox_load as per the colorbox issue queue.
here: https://www.drupal.org/node/2223247
cleared caches etc...

zeitwarp
zeitwarp's picture
More...

The problem appears to be that the image no longer links to colorbox once the page is in a narrow format. Instead it links back to itself. [the product page]
This can best be seen on a small tablet...where in landscape..the colorbox launches..and in portrait is doesn't. [ipad mini Nexus 7 etc]
i have messed around a bit more with the colorbox configuration....turning mobile detection on..but setting the width parameter to 50px...but no luck. Also did some looking around with the product image settings.

So perhaps it is a view issue associated with the theme?..when responding to device size.

One final important point.....I'm no expert in any of the above.

support
support's picture
Hi there Zeitwarp:

Hi there Zeitwarp:

Thanks for providing all the aspects related to your issue and your steps. However, this is specifically a customization issue and we cannot take all of those as are too "project specific".

Still, can you share your page URL to take a look at the behavior and maybe give you some insights?

Best!!!

zeitwarp
zeitwarp's picture
Ok...but...

I don't think it's really a customisation issue....

When you resize the page on a desktop...the same thing happens once the layout changes to accommodate the narrower browser.

Same thing happens with the instock demo.

For example....inspecting the main product photo...using a random product from the demo:

http://demos.doublemthemes.com/instock/instock/products/asus-tab-111-iee...

<img class="field-slideshow-image field-slideshow-image-1" typeof="foaf:Image" src="http://demos.doublemthemes.com/instock/instock/sites/default/files/style... width="420" height="280" alt="">

with a narrow browser....changes to:

<img class="field-slideshow-thumbnail field-slideshow-thumbnail-1" typeof="foaf:Image" src="http://demos.doublemthemes.com/instock/instock/sites/default/files/style... width="320" height="255" alt="">

The problem appears to be that once the browser has narrowed...you can no longer configure the [theme included] colorbox in field slideshow/product display settings [admin/commerce/products/types/product/display]

Is it a template issue ? if so...can you point me at the right one?

Your help would be greatly appreciated.

It's a great theme. Thanks

zeitwarp
zeitwarp's picture
Just to clarify...

Hi

Just to clarify....

when the browser is narrowed ...the first image displayed changes from a field slideshow image...[which can be configured easily to open Colorbox]....to a field slideshow thumbnail...[which it appears cannot].

Obviously something calls for this change.

Just wondered if it was a view...or a template...or ????.....

Have used Devel Themer to track it..but not getting anywhere fast.

Basically...Are there any settings that allow me to configure / edit the display when in narrowed browser /mobile ?

Thanks

zeitwarp
zeitwarp's picture
Looks like it's CSS...to do with Less ???

Ok....so made a bit of a breakthrough....but need help from someone who knows what they're doing.

Looking at the narrowed desktop browser [ same as mobile]...

When I override [de-select] the "display: none !important" bit of CSS below...then the first image size reverts to the same as the 'normal width' browser...and is again clickable to launch the colorbox

@media (max-width: 767px)
.node-type-product-page .main-content .node-product-page .field-slideshow-wrapper .field-slideshow {
display: none !important;
}

I guess that somewhere in the Less CSS...there is a @media series of instructions that hides the main product image when the browser narrows below a certain width....and leaves the thumbnails as a display.

So....that creates a problem for anybody wanting to enlarge an image in a mobile environment.

Pinch & zoom would be a fine solution....but I'm búggered if I can figure out a way to get that to work without messing up the theme.

But as I said....I'm pretty limited in ability.

Any ideas??

it would vastly improve the theme if there was a pinch & zoom facility ..or some way to enable viewing of a larger image in a mobile display. [Modules like Cloud Zoom mess up the the normal size theme.]

zeitwarp
zeitwarp's picture
style.less

Perhaps......It's in here somewhere that the magic needs to happen....

sites/all/themes/stock/less

Line 2557 onwards:

I've tried a few things..but can't get there.

Can you suggest a workaround?

Would be nice to leave the 1st image as displaying but with a reduced size.

@media @mobile{

.responsive-nav{

display: block;

}

.head-top-container{

display: none;

}

#block-commerce-cart-cart {
display: none;
}

.span12 .view-instock-offers-blocks .views-row {
border-bottom: 1px dashed #DDDDDD;
clear: both;
margin-bottom: 6px;
margin-right: 0;
min-height: 120px;
padding-top: 12px;
border-right: none;

.views-field-body{

padding-bottom: 10px;

}

}

.span12 .view-instock-offers-blocks .views-row-last {
border-bottom: none;
}

.view-id-productos .views-row, .view-related-items .views-row {
text-align: center;
border-right: none !important;
border-bottom: 1px dashed #DDDDDD;
margin-bottom: 22px;
margin-right: -2px;
padding-bottom: 22px;
}

.view-id-productos .views-row-last, .view-related-items .views-row-last {

border-bottom: none !important;

}

.view-id-productos .views-field-nothing, .view-related-items .views-field-nothing {

display: none !important;

}

.view-id-productos .views-field, .view-related-items .views-field {

padding-right: 0 !important;

}

.view-id-productos .views-field-field-top-right-feature, .view-related-items .views-field-field-top-right-feature{

padding-right: 10px !important;

}

#block-block-5 h2 {

clear: both;
font-size: 35px;
padding-top: 22px;
text-align: center;
}

#block-block-5 {
text-align: center;
}

#block-block-5 h3 {
text-align: center;
}

#block-block-5 .btn {
float: none;
margin-top: 23px;
}

.node-type-product-page .main-content .node-product-page .commerce-product-field-field-description-and-overview .field-name-field-description-and-overview {
width: 100%;
}

.node-type-product-page .main-content .node-product-page .field-name-field-description-and-overview .field-label, .node-type-product-page .main-content .node-product-page .field-name-field-brand .field-label {

line-height: 31px;

}

.field-slideshow-image{

width: 100px;

}

.node-type-product-page .main-content .node-product-page .commerce-product-field-field-image {
float: none;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.node-type-product-page .main-content .node-product-page .field-slideshow-wrapper .field-slideshow {
display: none !important;
}

.node-type-product-page .main-content .node-product-page .field-slideshow-pager li {
border: 1px solid #CCCCCC;
box-shadow: 0 0 6px #CCCCCC;
display: block;
margin-bottom: 8px;
margin-right: 9px;
width: 46%;
}

#block-widgets-s-addthis-share {
border-left: medium none;
float: none;
height: 29px;
margin-bottom: 22px;
padding-left: 0;
width: 100%;
}

.node-type-product-page .main-content .node-product-page .field-slideshow-pager {
clear: both;
margin-left: auto;
margin-right: auto;
max-width: 100% !important;
}

.field-slideshow-controls{

display: none;

}

.node-type-product-page .main-content .node-product-page .field-slideshow-thumbnail {
max-width: 90%;
}

.node-type-product-page .main-content .node-product-page .field-slideshow-pager {
clear: both;
margin-left: 0;
margin-right: -10px;
max-width: 104% !important;
}

.form-item-quantity{

display: none;

}

.field-type-commerce-product-reference {
float: right;
margin-bottom: 14px;
margin-top: -41px;
text-align: right;
}

.commerce-product-field-field-description-and-overview{

border-top: 1px dashed #EEEEEE;
clear: both;

}

#block-menu-menu-top-menu{

display: none;

}

}

zeitwarp
zeitwarp's picture
Bump.

*bump*
thnx

Log in to post comments