Scroll mobile

[iGweb]

Hello,

I have a bug that bothers me on my website. Maybe you'll get an idea of the problem ...?

In mobile version (smartphone), when I want to scroll by positioning my finger on the main image, it does not work.
I have to be above or below to be able to scroll

Do you have an idea to correct this?

[iGweb]

Website Link : http://www.igweb.fr/LOIZEAU/index.ph...-24726991.html

[Tim]

Well, this is not a normal image anymore. You use the zoom gallery that brings it's own behaviour for mobile devices and breaks the regular touch-scroll event. You should replace that gallery with a static <img> for mobile devices. This can be done easily in the template building a switch using Contaos Environment class. (you must visit the page with a real mobile device)

<?php if(\Environment::isMobile || \Environment::get('agent')->mobile): ?>

html for mobile only

<?php else: ?>

html for desktops, tabletts only

<?php endif; ?>

Sure, CSS media queries also work.

[iGweb]

I have a little trouble understanding.

I need to modify the template: customcatalog_cardealer_reader.html5 ?

[iGweb]

Here is my template

    <div class="single-top">  <h1><?php echo $this->field('brand')->value(); ?> <?php echo $this->field('name')->value(); ?></h1>     <div class="id">  N° <?php echo $this->field('propety_number')->value(); ?>  </div>  <div class="single-top-content">  <div class="single-leftside">  <?php $imgs = explode(";",$this->field('galerieurl')->value());?>  <div class="ce_gallery attribute gallery">  <div class="ce_gallery block">  <div class="ce_elevatezoom elevatezoom_gallery_wrapper">  <div class="elevatezoom_gallery_window">  <a id="elevatezoom_image_gallery_8_window" class="elevatezoom_gallery cboxElement" href="<?=$imgs[0]?>" data-lightbox="lb8">  <div class="zoomWrapper"><img id="elevatezoom_image_gallery_8" data-zoom-image="<?=$imgs[0]?>" src="<?=$imgs[0]?>" alt="car_interieur1.jpg" title="" style="position: absolute;"></div>  </a>  </div>  <div id="elevatezoom_gallery_8" class="elevatezoom_gallery gallery">  <ul class="cols_4" id="gallery_8">  <?php $no = 0;$first = " col_first";?>  <?php foreach ($imgs as $val):?>  <?php if ($val != ""):?>  <li class="entry row4 col_<?=$no++?><?=$first?>">  <?php $first = "";?>  <?php $name = explode("/", $val)[Count(explode("/", $val))-1];?>  <a class="elevatezoom_gallery button cboxElement" href="<?=$val?>" data-lightbox="lb8" title="<?=$name?>" data-image="<?=$val?>" data-zoom-image="<?=$val?>">  <img src="<?=$val?>" alt="<?=$name?>" title="">  </a>  </li>  <?php endif ?>  <?php endforeach?>  </ul>  </div>     <script type="text/javascript">  /* <![CDATA[ */     /**  * Activate the zoom  * See: http://www.elevateweb.co.uk/image-zoom/examples  */  jQuery(document).ready(function()  {  jQuery('#elevatezoom_image_gallery_8').elevateZoom(  {    gallery:'elevatezoom_gallery_8',    galleryActiveClass: 'active',    responsive: true,    cursor: 'pointer',    imageCrossfade: true,    zoomType : "lens",    lensShape : "round",    lensSize : 200  });     jQuery('#elevatezoom_gallery_8 a').bind('click',function()  {  jQuery('#elevatezoom_image_gallery_8_window').attr('href', jQuery(this).data('zoom-image') );  });  });  /* ]]> */  </script>  </div>  </div>  </div>  <!--  <div class="ce_gallery attribute gallery">   <div class="ce_gallery block">     <ul class="cols_4" id="gallery">  <?php $no = 0;$first = " col_first";?>  <?php foreach (explode(";",$this->field('galerieurl')->value()) as $val):?>  <?php if ($val != ""):?>  <li class="entry row4 col_<?=$no++?><?=$first?>">  <?php $first = "";?>  <figure class="image_container">  <img src="<?=$val?>" alt="16216991_01_hd.jpg" width="800" height="600">  <a href="<?=$val?>" data-lightbox="lb17126991" title="16216991_01_hd.jpg" class="cboxElement">  <div class="content">  <div class="content-outside">  <div class="content-inside">  <div class="capt"></div>  <i class="fa fa-plus-circle fa-3x"></i>  </div>  </div>  </div>  </a>  </figure>  </li>  <?php endif ?>  <?php endforeach?>     </ul>   </div>  </div>  -->  <!--<?php echo $this->field('gallery')->html(); ?>-->  </div>  <div class="single-rightside">  <div class="prix single-price"><strong><?php echo $this->field('price')->html(); ?> &euro;</strong></div>  <div class="single-metadata">  <div class="single-metadata-col1"><strong>Kilométrage</strong><?php echo $this->field('mileage')->value(); ?> km</div>  <div class="single-metadata-col2"><strong>Puissance DIN</strong><?php echo $this->field('puissance_din')->value(); ?> cv</div>  <div class="single-metadata-col3"><strong>Année</strong><?php echo $this->field('year')->value(); ?></div>  </div>  <table class="table-striped">  <tr>  <td>Marque</td>  <td><?php echo $this->field('brand')->html(); ?></td>  </tr>  <tr>  <td>Modèle</td>  <td><?php echo $this->field('name')->html(); ?></td>  </tr>  <tr>  <td>Version</td>  <td><?php echo $this->field('version')->html(); ?></td>  </tr>  <tr>  <td>Genre</td>  <td><?php echo $this->field('Genre')->html(); ?></td>  </tr>  <tr>  <td>Carrosserie</td>  <td><?php echo $this->field('carrosserie')->html(); ?></td>  </tr>  <tr>  <td>Couleur</td>  <td><?php echo $this->field('couleur')->html(); ?></td>  </tr>  <tr>  <td>Energie</td>  <td><?php echo $this->field('Energie')->html(); ?></td>  </tr>  <tr>  <td>Type de boîte</td>  <td><?php echo $this->field('boite')->html(); ?></td>  </tr>  <tr>  <td>Puissance fiscale</td>  <td><div class="puissance_fiscale"><?php echo $this->field('puissance_fiscale')->html(); ?></div><div class="cv">cv</div></td>  </tr>  <tr>  <td>Cylindrée</td>  <td><div class="cylindree"><?php echo $this->field('cubic')->html(); ?></div><div class="cm">cm3</div></td>  </tr>  <tr>  <td>Consommation</br>urbaine</td>  <td><div class="co2"><?php echo $this->field('consommations_urbaine')->html(); ?></div><div class="cm">l/100km</div></td>  </tr>  <tr>  <td>Consommation</br>extra urbaine</td>  <td><div class="co2"><?php echo $this->field('consommations_extra_urbaine')->html(); ?></div><div class="cm">l/100km</div></td>  </tr>  <tr>  <td>Consommation</br>mixte</td>  <td><div class="co2"><?php echo $this->field('consommations_mixte')->html(); ?></div><div class="cm">l/100km</div></td>  </tr>  <tr>  <td>Emissions de CO2</td>  <td><div class="co2"><?php echo $this->field('emission')->html(); ?></div><div class="cm">g/km</div></td>  </tr>  </table>  <?php echo $this->field('notelist')->html(); ?>  </div>  </div>  </div>     <div class="single-bottom">  <div class="ce_tabs">  <div class="tabs classic tabs_<?php echo $this->id; ?>">  <ul>  <li><a>Options / Equipements</a></li>  </ul>  </div>  <div class="panes panes_<?php echo $this->id; ?>">  <div class="section active">  <div class="single-features"><?php echo $this->field('description')->html(); ?></div>  </div>  </div>  </div>  </div>        <script type="text/javascript">  /* <![CDATA[ */  jQuery(document).ready(function(){  jQuery(".tabs_<?php echo $this->id; ?> li:first").addClass('active');      jQuery(".tabs_<?php echo $this->id; ?> li").click(function(e){          if (!jQuery(this).hasClass("active")) {              var tabNum = jQuery(this).index();              var nthChild = tabNum+1;              jQuery(".tabs_<?php echo $this->id; ?> li.active").removeClass("active");              jQuery(this).addClass("active");              jQuery(".panes_<?php echo $this->id; ?> div.active").removeClass("active");              jQuery(".panes_<?php echo $this->id; ?> div:nth-child("+nthChild+")").addClass("active");          }      });  });  /* ]]> */  </script>

[Tim]

Maybe it is easier to use two readers. One just for mobile and in that template without the elevatezoom_gallery, just the plain image.

I wrote a little helper tool that can do the device switching for you: http://forum.premium-contao-themes.c...ice_visibility

[iGweb]

I think I'll leave it like that. It's not too serious.

Thanks anyway ;-)