osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Jquery Tabs et bxGallery [RESOLU]
equisol
posté 12 Jul 2014, 13:29
Message #1


Ceinture jaune+ OSC
Icône de groupe

Groupe : Membres
Messages : 124
Inscrit : 7-November 07
Lieu : Lyon
Membre no 19668



Bonjour tout le monde,

J'ai un problème de design avec les vignettes de bxGallery lorsqu'elles sont liées à jquery Tabs.
Vu que ce n'est pas facile à expliquer, voici le problème de visu : 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 !!

Ce message a été modifié par equisol - 20 Jul 2014, 10:19.


--------------------
Goo69
Go to the top of the page
 
equisol
posté 20 Jul 2014, 10:19
Message #2


Ceinture jaune+ OSC
Icône de groupe

Groupe : Membres
Messages : 124
Inscrit : 7-November 07
Lieu : Lyon
Membre no 19668



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.


--------------------
Goo69
Go to the top of the page
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 20th November 2017 - 20:08
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)