Estoy pasando un mal rato tratando de entender y luego implementar un método de desplazamiento de trabajo.

Objetivo: Crea un visor / galería de imágenes grandes. Los usuarios hacen clic en las teclas de flecha o en las miniaturas en un menú activado para navegar por las imágenes. La galería y el menú deben realizar un seguimiento de la miniatura que están viendo los usuarios.

Situación: Tengo una posición: #menu absoluto que se desliza para hacerse visible cuando el mouse se desplaza sobre el borde derecho de la ventana. Este #menu tiene un #galleryMenu hijo cuyo desbordamiento: desplazamiento. El resultado es un menú desplazable que se navega utilizando la rueda de desplazamiento.

Problema: Cada vez que el mouse sale del #menú, pierdes tu lugar. No sé cómo hacer que el #menú permanezca donde lo dejó el usuario.

Ejemplo de enlace al sitio web: http://bahaha.ga/?view=0

También probé algunos complementos, pero cancelan el desbordamiento de # galleryMenu: desplácese y arruina el #menu general.

Cualquier ayuda sería apreciada.

A continuación se muestra un código más simple / limpio para ayudar a comunicar mi objetivo / problema.

HTML

<div id="resolution">
    <div id="main">
        <img />
    </div>
    <div id="menu">
        <div id="galleryMenu">
            <ul id="galleryThumbnail">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
             </ul>
         </div>
     </div>
</div>

CSS

#resolution{
    position: absolute;
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
}

#main{
    position: absolute;
    width: 100%;
    height: 100%;
}

#menu{
    position: absolute;
    display: block;
    cursor: pointer;
    right: 0;
    width: 10px;
}

#galleryMenu{
    position: absolute;
    display: none;
    width: 350px;
    right: 0;
    overflow: scroll;
}

#galleryThumbnail{
    list-style-type: none;
    padding: 20px 0 20px 0;
    margin: 0;
}
#galleryThumbnail li{
    padding: 0;
    margin: 0;
}

JQUERY

//Show and Hide Gallery Menu
$("#menu").hover(function(){
    $("#galleryMenu").show('slide', {direction: 'right'}, 500);} , function(){
    $("#galleryMenu").hide('slide', {direction: 'right'}, 500);}
);

//Set Window Height as Menu Heights
$("#menu").height($(window).height());
$("#galleryMenu").height($(window).height());

// Scroll to Current Thumbnail on Menu
$("#galleryMenu").animate({ 
    scrollTop: $(document).height()-$(window).height()}, 
    1400,
    "easeOutQuint"
);
0
SquigglePad 3 sep. 2014 a las 11:58

2 respuestas

La mejor respuesta

Me las arreglé para encontrar una solución. El uso de slideUp () y slideDown () de Jquery mantuvo el restablecimiento de la ubicación del #menu (instantáneamente tan pronto como su mouse se apagó del #menu).

En lugar de usar slideUp () y slideDown (), terminé usando .animate () para mover #menu fuera de la pantalla a la derecha. Esto hizo que el seguimiento de la posición de desplazamiento en #menú fuera más fácil ya que el usuario se desplazó temporalmente.

Khaleel, gracias por el código, pero no funcionó para mí. Sin embargo, logré obtener un código de trabajo:

//Menu : Scroll to Thumbnail
$("#galleryMenu").animate(
   {scrollTop: $("li:nth-child(<?php echo $currentImage ?>)").offset().top-()},
    500
);

Utilizando los elementos LI de UL y un poco de PHP, pude tomar el enésimo elemento secundario del elemento li que contenía la miniatura de la imagen actualmente visualizada para centrarlo en #menu.

Gracias a todas!

0
SquigglePad 4 sep. 2014 a las 01:10

Necesitas esto .

var tempScrollTop=0;
$(document).on( 'scroll', '#galleryMenu', function(){
    tempScrollTop = $(#galleryMenu).scrollTop();
});
$(document).on( 'hover', '#galleryMenu', function(){
   $(#galleryMenu).scrollTop(tempScrollTop);
});

Espero que ayude

0
Khaleel 3 sep. 2014 a las 08:50