• 0
Sign in to follow this  
Followers 0

Carousel Links not working on Mobile Device


Question

Posted · Report post

URL:http://edificeinc.com

Pagelines Framework Version: 2.4.4
WordPress 3.6

 

We are experiencing a bit of strangeness with the carousels that are used throughout the Portfolio section of this site (ref:http://edificeinc.com/cats-administrative-facility-and-bus-maintenance-parking-garage/). They work fine on a desktop/laptop, however if viewed using an iOS or Android device, the thumbnail must be "held" in order for a dialog box to open to launch the link associated with it. Any ideas on where to troubleshoot this?

Thanks in advance,
~ ratputin

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Hi,

 

What's the image source? Posts, Categories, NextGen or somthing else?'

 

Is the CSS for adding that background by any chance set in PX versus EM or %?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

What's the image source? Posts, Categories, NextGen or somthing else?'

 

Is the CSS for adding that background by any chance set in PX versus EM or %?

 

 

Posts. And the background is whatever came with the install...PX I believe...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well, the background was modified, so I'm concerned about that. However, it turns out the carousel wasn't really designed to be responsive. So, that's likely the reason.

 

As for fixing it, I'd recommend replacing the non-responsive slider with one that is responsive.  You can find some at http://www.wordpress.com/extend/plugins

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rob,

I stand corrected (for some reason I read your question as if it pertained to the carousel thumbnail backgrounds). I used the page-lines-template-theme as a child and modified the carousel CSS to:

 

 

.section-carousel .thecarousel {
background-color: #706f73;
background-image: -moz-linear-gradient(top, #e9e9e9, #706f73);
background-image: -ms-linear-gradient(top, #e9e9e9, #706f73);
background-image: -webkit-gradient(linear,0 0,0 100%,from( #e9e9e9),to( #706f73));
background-image: -webkit-linear-gradient(top, #e9e9e9, #706f73);
background-image: -o-linear-gradient(top, #e9e9e9, #706f73);
background-image: linear-gradient(top, #e9e9e9, #706f73);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#706f73', GradientType=0);
border: 1px solid #e9e9e9;
}
 
It was predominately a color change.
 
As to the responsive nature, why would the links fail in the iPad horizontal mode (1024px X 768px or 2048px X 1536px)? I'd understand if it were an issue in the vertical mode as the @media selector would come into play...
 
KO
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nevermind, i just realized the "titles" are based on the hover. As the touch devices have no notion of hover and only a single action can be assigned to a tap, the script defaults to the hover upon the tap. So...do you know where in the script I could remove the hover? If it becomes "static" then I think I could get the link to work.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

For those that would like to know a band-aid fix, and can forgo the Titles on the hover...do the following and it will work on touch screens:
 
1. Find the section.php file at page lines > sections > carousel > section.php
 
2. Change line (approx 283) from:

$link = sprintf('<a class="carousel_image_link" href="%s">%s<span class="list-title">%s</span></a>', $a['link'], $img, $a['title']);

to

$link = sprintf('<a class="carousel_image_link" href="%s">%s</a>', $a['link'], $img);

 
3. Save the file.
 
Please keep in mind that making this edit will remove the titles from showing on hover, and that the change will need to be made after every Pagelines update. (I tried to copy the carousel folder into my child theme's section folder, but it was ignored by the framework. If anyone can help with THAT issue, I would appreciate it.)
 
As to the issue of the carousel not being responsive, I plan to hide via @media selectors for anything under 960px.
 
Hope this actually helps someone.
 
KO

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for posting that solution. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0