Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forum osCommerce-fr _ Design OsC2.3 _ Jquery Tabs et bxGallery [RESOLU]

Écrit par : equisol 12 Jul 2014, 13:29

Bonjour tout le monde,

J'ai un problème de design avec les vignettes de bxGallery lorsqu'elles sont liées à http://jqueryui.com/tabs/.
Vu que ce n'est pas facile à expliquer, voici http://www.saintaubandoze.fr/les_hebergements.php : pour la première fiche descriptive (ferme de villauret), pas de problème, les vignettes sont bien positionnées. Par contre, pour les autres fermes, les vignettes se superposent.
J'ai essayé de modifier tous les css possibles, même dans le fichier javascript "jquery.bxGallery.1.1.min.js". Rien n'y fait...

Voici le code concerné :

Code
    <div id="tabs">
        <div id="contentTop">
<?php
    $tab_contenu = Array();
    $conteur_tab = 1;
    $liste_query = tep_db_query("select p.products_id, p.products_image, pd.products_name, pd.products_baseline, pd.products_description from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c where etot.categories_id = '6' and p2c.products_id = p.products_id and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "'");
?>
            <ul>    
<?php
    while ($liste = tep_db_fetch_array($liste_query)) {
?>
                <li>
                    <a href="#tabs-<?php echo $conteur_tab; ?>">|&nbsp;<?php echo $liste['products_name']; ?>&nbsp;|</a>
                </li>
<?php
$tab_contenu[] = array(
     'num_tab' => $conteur_tab,
     'products_id' => $liste['products_id'],
     'products_name' => $liste['products_name'],
     'products_baseline' => $liste['products_baseline'],
     'products_description' => $liste['products_description'],
     'products_image' => $liste['products_image'],
);
$conteur_tab++;
        }
?>
            </ul>
        </div><!--fin contentTop-->

<?php
reset($tab_contenu);

foreach( $tab_contenu as $value ) {

    $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . $value['products_id'] . "' order by sort_order");
?>

        <div id="tabs-<?php echo $value['num_tab']; ?>">
            <div id="contentMiddle">
                <div id="contentMiddleLeft" class="pinLeft">
                    <div id="texte" class="contentText">
                        <h1><?php echo $value['products_name']; ?></h1>
<?php if (tep_not_null($value['products_baseline']))
    {
                  echo '<p id="baseline">' . $value['products_baseline'] . '</p>';
    }
?>
                        <?php echo $value['products_description']; ?>
                    </div>
                </div>

                <div id="contentMiddleRight" class="pinRight">
                    <div id="piGal-<?php echo $value['products_id']; ?>" class="piGal">
                        <ul>
<?php
$pi_counter = 0;
while ($pi = tep_db_fetch_array($pi_query)) {
    $pi_counter++;
    
    $pi_entry = '<li style="float:left;"><a href="';
    
    $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);
    
    $pi_entry .= '" target="_blank" style="background:none;" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';
    
    $pi_entry .= '</li>';
    
    echo $pi_entry;
}
?>
                        </ul>
                    </div>
                </div>
<script type="text/javascript">
$('#piGal-<?php echo $value['products_id']; ?> ul').bxGallery({
  maxwidth: 300,
  maxheight: 300,
  thumbwidth: <?php echo (($pi_counter > 1) ? '97' : '0'); ?>,
  thumbcontainer: 400,
  load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

<script type="text/javascript">
$("#piGal-<?php echo $value['products_id']; ?> a[rel^='fancybox']").fancybox({
  cyclic: true
});
</script>
        
            </div><!--fin contentMiddle-->
        </div><!--end id tabs-x -->
<?php
    }
?>
    </div><!--end id tabs-->


Un p'tit coup d'pouce ?

Merci beaucoup !!

Écrit par : equisol 20 Jul 2014, 10:19

Le problème vient du calcul de la taille de l'image dans jquery.bxGallery.1.1.min.js

Il faut remplacer :

Code
$img.height(($imgheight/$imgwidth)*o.thumbwidth)

Par une valeur fixe de largeur de vignettes :
Code
$img.height('73px')


C'est du bidouillage, mais ça fonctionne.

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)