2012-10-29 3 views
1

J'ai utilisé Isotope dans mon nouveau site et le problème auquel je fais face est quand je planer l'élément individuel d'un div qui est plus grand à condition d'ajouter une description supplémentaire, mais il devient caché ou coupé par les autres divs. Ce que je veux réaliser est similaire au site www.ted.com.Isotope Maçonnerie état stationnaire ne fonctionne pas

Ceci est la partie html de mon réseau qui tire l'individu abstrait de la base de données

<div id="container" class="clearfix"> 

    <?php 

    $sql="SELECT * FROM abstracts where year='2012' AND status='publish' order by date_added desc LIMIT 0, 15"; 

    $sql_query = mysql_query($sql); 
    while($row=mysql_fetch_assoc($sql_query)) 

    { 

    ?> 
      <a href="http://www.painlink.org/staging/login.php"> 

      <div class="category <?php echo $specialities;?>" data-symbol="Hg" data-category="basicscience"> 
      <div class="Border"> 
       <img src="cropper.php?src=admin/images/journals/<?php echo $row['journal_image'];?>&h=180&w=120&zc=1"> 
       **<span><div id="filterLink_text"><?php echo $row['title']; ?></div></span>** 
      </div> 
      </div></a> 

     <?php 
    } 
    ?> 
</div> 

J'ai également changé ce qui suit dans le css afin qu'il soit plus élevé que l'isotope produit

.isotope-item:hover { 
    z-index: 10; 
} 

La plage en gras masquée doit être affichée lors du vol stationnaire.

Mon URL du site est www.painlink.org/staging~~V~~singular~~3rd

Pouvez-vous s'il vous plaît aidez-moi à ce sujet.

Cheers, Neethi

+0

Vous imbriquez mal vos éléments isotopes. Si vous souhaitez afficher du contenu sur une image en survol, vous devez utiliser cette logique: Créez un div (élément Isotope) et, à l'intérieur de ce div, vous imbriquez deux autres divs; un avec votre image, vidéo, peu importe, et un avec votre contenu, texte, etc. qui doit apparaître sur hover. Dans votre CSS, vous masquez ce contenu avec display: none. Ensuite, vous pouvez simplement montrer() ou animer() le contenu à afficher sur le dessus de votre image. Si votre contenu est plus grand que l'image, Isotope va développer l'élément et le relancer automatiquement. Exemple http://adammunns.com/grid-portfolio/ – Systembolaget

Répondre

0

J'ai écrit une chose semblable et moi le script à partir du site http://www.maxmedia.com. Ce n'est pas si facile à accomplir. Vous pouvez essayer de dissoudre le javascript de maxmedia. Ils ont utilisé le javascript compressé, donc vous avez besoin d'un bon éditeur. Il y a aussi le problème quand vous passez la souris d'une tuile et d'une souris sur une autre tuile rapidement encore et encore il semble que l'évènement de la souris ne marche parfois pas. Ensuite, vous devez enregistrer les événements dans un contrôleur. A propos de la durée masquée Je ne vois pas de problème ici mais je pense que vous devez le résoudre en utilisant animer. Vous devez afficher la plage et faire défiler l'image et la plage simultanément pour que la plage soit entièrement visible et que l'image soit masquée lorsque vous ne souhaitez pas agrandir la mosaïque.