Jump to content
  • 0

Fotorama


okunev2
 Share

Question

Наврное многие используют http://fotorama.io

 

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


Превю расположил слева. А вот как сделать так не пойму: https://dl.dropboxusercontent.com/u/59113912/kar.jpg

Т.е. превю на фото в нижнем левом углу

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

А что непонятного? Смотрите фаербагом какой класс у блока с превью, накладываете на него свои правила в CSS и всё.

 

Да вот и смотрю, но толку, не черта не выходит. Мешанина стилей :(

есть класс

.fotorama__stage,.fotorama__nav {  overflow: hidden;  position: relative;}
Link to comment
Share on other sites

  • 0

 

А что непонятного? Смотрите фаербагом какой класс у блока с превью, накладываете на него свои правила в CSS и всё.

 

Да вот и смотрю, но толку, не черта не выходит. Мешанина стилей :(

есть класс

.fotorama__stage,.fotorama__nav {  overflow: hidden;  position: relative;}

!important?

Link to comment
Share on other sites

  • 0

 

 

А что непонятного? Смотрите фаербагом какой класс у блока с превью, накладываете на него свои правила в CSS и всё.

 

Да вот и смотрю, но толку, не черта не выходит. Мешанина стилей :(

есть класс

.fotorama__stage,.fotorama__nav {  overflow: hidden;  position: relative;}

!important?

 

 

вот тоьок какому именно тегу

<div class="fotorama__wrap fotorama__wrap--css3 fotorama__wrap--slide fotorama__wrap--no-controls" style="width: 643px; max-width: 100%;"><div class="fotorama__stage" style="width: 640px; height: 426px;"><div class="fotorama__nav-wrap"><div class="fotorama__nav fotorama__nav--thumbs" style="width: 640px;"></div></div></div>

это файрбаг выводит.

 

класс fotorama общий контейнер, а ниже класс навигации fotorama__nav-wrap

дал классу fotorama__nav-wrap

.fotorama__nav-wrap {position: absolute;}

ничего не видно

Link to comment
Share on other sites

  • 0

А что непонятного? Смотрите фаербагом какой класс у блока с превью, накладываете на него свои правила в CSS и всё.

слишком сложно. Проще спросить на форуме и получить готовый код.
  • Like 1
Link to comment
Share on other sites

  • 0

 

А что непонятного? Смотрите фаербагом какой класс у блока с превью, накладываете на него свои правила в CSS и всё.

слишком сложно. Проще спросить на форуме и получить готовый код.

 

 

На каком форуме? Я думаю если ни кто не отвчеает из старожил, им тоже не по силам данная задача :)

Edited by okunev2
Link to comment
Share on other sites

  • 0

Почему же не ответили? Я ответил, например. Если хотите готовое решение — нет никаких проблем, я, например, беру скромные 500 рублей за час своей работы.

Link to comment
Share on other sites

  • 0

Почему же не ответили? Я ответил, например. Если хотите готовое решение — нет никаких проблем, я, например, беру скромные 500 рублей за час своей работы.

 

Уже решил данную проблему. Спасибо за помощь :)

Link to comment
Share on other sites

  • 0
.fotorama {position: relative; border: 1px solid #ddd;}.fotorama__nav-wrap {position: absolute; bottom: 0;}.fotorama__nav {text-align: left; padding: 5px 0;}.fotorama__nav__shaft {margin: 0 0 5px 5px;}.fotorama__nav--thumbs .fotorama__nav__frame:last-child {margin-right: 12px !important;}.fotorama__thumb-border {border-color: #fff;}.fotorama__oooo {margin-top: 0; margin-left: 0;}.fotorama__oooo:after, .fotorama__oooo:before {display: none;}

может кому пригодится решение :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy