Кто нибудь реализовывал подобное ?

[adminro2 2]

Друзья мои вопрос такого плана. Кто нибудь знает как сделать такой же вид управления галереи 

но только для версии шаблона smartphone, в нем сейчас выглядит вот так 

Правиться я так понимаю должны файлы .js, но не пойму какие. Все на что  меня хватило это поменять название меню управления на наш язык в файле highslide.js далее полный провал. Тыкните хотя бы носом куда лезть.
 

[alex32 934]

Цитата

Тыкните хотя бы носом куда лезть

engine.css
 

[adminro2 2]

5 часов назад, alex32 сказал:

engine.css

 

Нет, там такого точно нет. Там есть ткой блок "показ оригинальной картинки загруженной на сайт из уменьшенной копии" но это относится просто  к увеличению единичной картинки. А нужно изменить управление галереи просмотра со множеством картинок.
 

[odys 384]

32 минуты назад, adminro2 сказал:

показ оригинальной картинки загруженной на сайт из уменьшенной копии

это оно и есть, всё, что относится к классу highslide-*

[adminro2 2]

1 час назад, odys сказал:

это оно и есть, всё, что относится к классу highslide-*

Но тогда откуда берется вот это ?    и как это заменить на это 

 

[Captain 612]

[webair 176]

/*---показ оригинальной картинки загруженной на сайт из уменьшенной копии---*/
.highslide-wrapper, .highslide-outline {
    background: #FFFFFF;
}

.highslide-image {
    border: 2px solid #FFFFFF;
}

.highslide-active-anchor {
    visibility: hidden;
}

 .highslide-active-anchor img {
    visibility: hidden;
}

.highslide-dimming {
    background-color: black;
}

.highslide-html {
    background-color: white;
}

.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-decoration: none;
    padding: 3px;
    border: 1px solid white;
    background-color: black;
}

a.highslide-full-expand {
    background: url("../dleimages/fullexpand.gif") no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

.highslide-display-block {
    display: block;
}

.highslide-display-none {
    display: none;
}

.highslide-caption {
    display: none;
    padding: 5px;
    background: white;
}

.highslide-controls {
    width: 195px;
    height: 40px;
    background: url("../../../engine/classes/highslide/graphics/controlbar-black-border.gif") no-repeat 0 -90px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.highslide-controls ul {
    position: relative;
    left: 15px;
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: url("../../../engine/classes/highslide/graphics/controlbar-black-border.gif") no-repeat 100% -90px;
}

.highslide-controls li {
    float: left;
    padding: 5px 0;
}

.highslide-controls a {
    background: url("../../../engine/classes/highslide/graphics/controlbar-black-border.gif");
    display: block;
    float: left;
    height: 30px;
    width: 30px;
    outline: none;
}

.highslide-controls a.disabled {
    cursor: default;
}

.highslide-controls a span {
    display: none;
}

 /*---The CSS sprites for the controlbar---*/
.highslide-controls .highslide-previous a {
    background-position: 0 0;
}

.highslide-controls .highslide-previous a:hover {
    background-position: 0 -30px;
}

.highslide-controls .highslide-previous a.disabled {
    background-position: 0 -60px !important;
}

.highslide-controls .highslide-play a {
    background-position: -30px 0;
}

.highslide-controls .highslide-play a:hover {
    background-position: -30px -30px;
}

.highslide-controls .highslide-play a.disabled {
    background-position: -30px -60px !important;
}

.highslide-controls .highslide-pause a {
    background-position: -60px 0;
}

.highslide-controls .highslide-pause a:hover {
    background-position: -60px -30px;
}

.highslide-controls .highslide-next a {
    background-position: -90px 0;
}

.highslide-controls .highslide-next a:hover {
    background-position: -90px -30px;
}

.highslide-controls .highslide-next a.disabled {
    background-position: -90px -60px !important;
}

.highslide-controls .highslide-move a {
    background-position: -120px 0;
}

.highslide-controls .highslide-move a:hover {
    background-position: -120px -30px;
}

.highslide-controls .highslide-full-expand a {
    background-position: -150px 0;
}

.highslide-controls .highslide-full-expand a:hover {
    background-position: -150px -30px;
}

.highslide-controls .highslide-full-expand a.disabled {
    background-position: -150px -60px !important;
}

.highslide-controls .highslide-close a {
    background-position: -180px 0;
}

.highslide-controls .highslide-close a:hover {
    background-position: -180px -30px;
}

Вставьте это в конец \templates\smartphone\css\engine.css

odys вам правильно посоветовал.

 

А надписи берутся из js.

Изменено 21 февраля 2016 пользователем webair

[adminro2 2]

1 час назад, Captain сказал:

Дико извиняюсь ! Темы рядом,  думал я в Запросах и создал тему, тыкнул наверное в попыхах не туда. Может модератор перенесет тему ?

 

1 час назад, webair сказал:

Вставьте это в конец \templates\smartphone\css\engine.css

odys вам правильно посоветовал.

 

А надписи берутся из js.

Минуту назад буквально нашел код для этих целей из бесплатного шаблона веб-рембо http://webrambo.ru/39-besplatnyy-adaptivnyy-shablon-photographer-notes.html все заработало, но Ваш оказался лучше, нет передергиваний при наведении курсора.

Огромное Вам и всем спасибо. Проблема решена.

 

Изменено 21 февраля 2016 пользователем adminro2