Joomla Templates Club 406,261 posts

[pclemor Friend pclemorJoin date: July 2014Posts: 12Downloads:8Uploads:2 Thanks: 2 Thanked: 5 times in 2 posts]

#200010

The site workflow for the infinity scroller is pretty logical – you move left to right or right to left and right… you find an image you like you click on it.

On the iPAD same thing, you tap on the image and the popup view shows up with the details but on the iPhone, you can’t tap on the image for it to do something, you have to click on the TITLE instead… why the break in workflow/logic?

I tried it on your demo, same thing …

🙁

It feels like a Jquery or Javascript issue since there is no <a href link around the image in the code…

Hope this is fixed quickly – the iPhone interface is pretty good and except for this works fine.

The iPad interface is another story as I posted in another earlier thread… 🙁

Thanks,

Pierre.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#543618

Hi Pierre,

Please follow these steps below :

1. Open file root_folder/templates/ja_smashboard/html/com_content/featured/default_item.php and look for this code :

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image"> <img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>

then update as below :

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image">
<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>"></a>
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>

2. Next, open file root_folder/templates/ja_smashboard/css/custom.css and add this code :

@media (max-width: 480px) {
.item-image-wrap > div > a {
width: 100%;
height: 100%;
position: absolute;
}
}

Save your file and check the result.

[Author]

Posts