Discussion :

[KumKum007]

Bonjour à tous,

n'étant pas un spécialiste du jquery, je butte sur un problème pour afficher un div lors d'un survol d'une autre div (ou image).
Je souhaite réalisé le même genre d'effet qui est présent sur le site https://www.deutschland.de/de
Dans le listing de la page d'accueil, si l'on survol une des image ou le bandeau noir de l'image, ce dernier s'agrandit du bas pour afficher de nouvelles informations.
J'essaie de reproduire cet effet mais sans y arriver en totalité.

Pour cela j'utilise ceci en html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="column-1">        
	<div class="image"> 
	        <?php print $fields['field_images']->content; ?>
	</div>
	<div class="inner hover"> 
		<div class="padding-15">   
			<a href="<?php print $fields['path']->content; ?>">
				<h2><?php print $fields['title']->content; ?></h2>
			</a>
			<div class="extender">
				<span class="uppercase white">
                			<?php
                                                if (isset($fields['field_slogan']->content)) {
                                                        print $fields['field_slogan']->content;
                                                }
                                        ?>
				</span>
				<div class="border-bottom grey-medium-border">
					<div class="price blue"><?php print $fields['php']->content; ?><span class="money">€</span></div>
				</div>
				<div class="padding-top-5 white">
					<?php print $fields['field_travel_type']->content; ?>
				</div>
			</div>
       		</div>
	</div>
</div>

et ceci dans mon javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function ($) {
	Drupal.behaviors.thumbnailhover = {
		attach: function(context, settings) {
			$(document).ready(function() {
 
				$('.hover').hover(
					function() {
						$(this).animate({height:$('.extender').height()});
					},
					function() {
						$(this).animate({height: 40});
					}
				);
 
			});
		}
  	}
})(jQuery);

Si je survole ma bande noire (div inner) l'effet est ok. Par contre je ne vois pas comment donner le même effet au survol de l'image.
Je pense qu'il faut revoir un peu le code mais après plusieurs tests sans succès , je ne sais pas quoi faire.

Avez-vous une solution ? Merci pour votre aide.

Cdlt.

[la.lune]

Est ce que ce que tu fais ressemble exactement à ce qui est dans le site, le petit rubant noir fait-t-il parti du cadre de l’image comme dans le site ou bien c'est tout en bas. Alors si c'est comme dans le site, normalement il y a un seul événement de survole, c'est le survole sur le div contenant l'image, mais vu que le div inner apparaisse dans le cadre du div de l'image alors c'est le même effet qu'on passe la souris en haut ou en bas, car tout est dans le cadre

Alors essayes de faire ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="column-1"> 
       <div class="image hover"> 
           <?php print $fields['field_images']->content; ?>
          </div>
       <div class="inner"> 
         <div class="padding-15"> 
         <!-- ..................... -->
        <!-- ..................... -->
    </div>
</div>

Alors le code javascript avec peu de modifications:

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function ($) {    Drupal.behaviors.thumbnailhover = {
        attach: function(context, settings) {
            $(document).ready(function() {
 
                $('.hover').hover(
                    function() {
                        $('.inner').animate({height:$('.extender').height()});
                    },
                    function() {
                        $('.inner').animate({height: 40});
                    }
                );
 
            });
        }
      }
})(jQuery);

Et si ton div inner avec le style ça n'apprait pas comme dans le site, alors ajoute la classe hover au div inner comme au début, mais il faut la garder aussi dans le div image car ce n'est pas un problème de dupliquer les class, mais c'est l'id qui crée des problèmes. Donc tu devra avoir quelque chose comme ça:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="column-1"> 
      <div class="image hover"> 
          <?php print $fields['field_images']->content; ?>
          </div>
       <div class="inner hover"> 
      <div class="padding-15">