Помощь с галереей Mootools - переходный текст - PullRequest
0 голосов
/ 08 сентября 2011

Я не уверен, возможно ли то, что я хочу, но я использую галерею изображений Mootools, которую вы можете увидеть здесь :

</script> 
    function startGallery() {
        var myGallery = new gallery($('myGallery'), {
            timed: true,
            showArrows: false,
            showCarousel: false
        });
    }
    window.addEvent('domready', startGallery);
</script> 

Вращение галереивыше, но в идеале я бы хотел, чтобы второй текстовый элемент (с белым фоном) был шире верхнего текстового элемента, поэтому он больше похож на изображение внизу.

Там естьзадействовано много Javascript, так что я не знаю, что мне следует публиковать здесь, чтобы люди могли помочь, но просто дайте мне знать, что я должен добавить сюда, и я вернусь и отредактирую.

Или, есликто-то знает что-то похожее в jQuery, которое позволило бы мне получить тот же эффект, но не требовало бы слишком много JS-кодирования, я был бы очень признателен.

Заранее спасибо, как всегда, Дэн

1 Ответ

2 голосов
/ 08 сентября 2011

Попробуйте этот css и посмотрите, какой он у вас после.

.slideInfoZone {
    position: absolute;
    z-index: 10;
    width: 100%;
    margin: 0px;
    left: 0;
    top:40px;
    color: #FFF;
    text-indent: 0;
    overflow: hidden;
    padding: 10px 0 0 20px;
    height: 70px;
}

.slideInfoZone h3{
    background: #000; 
    width: 200px; 
    padding: 30px; 
    margin-left: -30px; 
    display:inline;
}

.slideInfoZone p {
    position: absolute;
    bottom: 0;
    background: #FFF;
    font-size: 14px;
    color: #000;
    margin: 20px 0 0 -20px;
    padding: 10px 0 10px 20px;
    width: 50%;
}

В основном я удалил цвет фона для содержащего элемента, затем я присвоил тегу p цвет bg и изменил отступ / поле для h3. Я не слишком доволен тем, что мне пришлось делать с h3, но без изменения разметки все работает.

...