Към съдържанието

  •  

IPB Slider IMG

slider img text link news

  • Влезте в профила си за да пишете
20 отговора на тази тема

#1 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 05 януари 2014 - 22:21

Здравeйте, искам да помоля за помощ би искал да приложа над форумните раздели слидер който да показва x брой изображения с текст върху тях.

В интернет има доста знам.По точни ме интересува как се интегрира в самите tempate и css.



#2 D-rA

D-rA

    Луд умора няма

  • Админи
  • PipPipPip
  • 1093 Мнения:
Уроци

Публикувано 05 януари 2014 - 22:44

Функцията promotion Advertisement на nexus го позволява - в html code или banner images като разполагнето може да бъде навсякъде из темплейта.



#3 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 05 януари 2014 - 23:02

Може да опиташ и това http://invisionbg.co...119-ipc-slider/



#4 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 07 януари 2014 - 00:48

Благодаря за предложенията, но на мен ми трябва просто слидер.С Ip content не съм много на ти.С nexus не съм работил. ;(

Нещо такова може ли да се интегрира:

Цък!



#5 D-rA

D-rA

    Луд умора няма

  • Админи
  • PipPipPip
  • 1093 Мнения:
Уроци

Публикувано 07 януари 2014 - 00:59

Качи си галерия - тя има slider

Правиш албум с картинки с текстове и каквото искаш.

Галерията за upload недостъпна за потребители

и си готов



#6 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 07 януари 2014 - 20:29

Направих един урок за добавяне на Slider .... дано ти хареса http://invisionbg.co...r-тип-акордеон/



#7 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 09 януари 2014 - 13:57

Ето за това говоря.Браво SIlence евала ;) 


Слагам линк на текста към новината във форума и след като влезна да чета слидера се прецаква,

Прикачен файл  Untitled.png   343,91K   0 Брой сваляния



#8 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 09 януари 2014 - 18:44

Дай линк към форума ти за да погледнем точно какво се случва.



#9 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 09 януари 2014 - 19:42

Оправих въпросния проблем но имам друг.

Немога да добавям повече от 8 изображения иначе се не се виждат 9,10 и т.н. След като посоча с мишката се разкриват но уви губи се ефекта.

Форум



#10 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 09 януари 2014 - 19:54

Ами за сметка на ефекта ..... качеството ... иначе поздравления , стои много добре.

Не мисля че може да се направи по него голяма редакция ....

Ако открия друг с по големи възможности ще го постна като урок.

 

Но нека и колегите си кажат мнението.

 

 

П.С.  CharnBar-а също стои добре  :)



#11 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 09 януари 2014 - 20:02

Прикачен файл  Untitled.png   810,58K   0 Брой сваляния

 

Някаква идея как да сложа на белия background зад всички изображения логото си.Ама размера да бъде в съотношение с бялата рамка която се образува след последното изображение.



#12 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 09 януари 2014 - 20:23

отиди в Admin -> CPLook & Feel -> Manage Skin Sets & Templates -> Manage Templates in -> Вашият скин -> ipb_styles.css

Намери:

.accordian{
width: 905px;
height: 333px;
overflow:hidden;
margin: auto;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0px 8px 6px -6px black;
}

Замени с :

.accordian{
width: 905px;
height: 333px;
overflow:hidden;
background:  url({style_images_url}/ТВОЯТА СНИМКА.png);
margin: auto;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0px 8px 6px -6px black;
}

 Или:

.accordian{
width: 905px;
height: 333px;
overflow:hidden;
background: #1a2435;
margin: auto;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0px 8px 6px -6px black;
}

Ето ти пример как ще изглежда :

 

5om4to5m.png



#13 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 09 януари 2014 - 20:27

Има някакво разстояние между снимката и рамката на слидера.Не виждам padding никъде из кода или трябва да го сложа.

 

П.С: сложих просто цвят засега ще го оставя така ако реша да го сменя ще го мислим.

 

П.С: За тези който биха могли да използват слидера ето решение на проблема с резолюциите: 

 

Намерете в кода:

.accordian{
width: 905px;
height: 333px

 

Променете го на:

.accordian{
width: 100%;
height: 333px

 



#14 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 09 януари 2014 - 20:36

Това не е разстояние а content-a ....няма как да разчекнеш повече Slider-а ... но можеш да свиеш conten-а.

 

В Css намери:

.mainContent {
background: #fff;
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border-radius: 0px 0px 4px 4px;
padding: 5px;
min-height: 500px;

И промени само това

padding: 5px;

На :

padding: 0px;

49cabr7j.png



#15 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 09 януари 2014 - 20:39

Всичко е ок вече може да се локва.

 

П.С: Хареса ми израза: разчекнеш 



#16 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 09 януари 2014 - 20:55

:rofl:  :rofl:  :rofl:

 

Промени и това :

#content {
padding: 10px 0px;
line-height: 120%;
}

с това :

#content {
padding: 0px 0px;
line-height: 120%;
}

omzxxabv.png


Има начин да добавиш още малко снимки , като промениш този код:

.accordian li{
position: relative;
display:block;
width:140px;
float: left;
border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

Променяш само широчината на затворените слайдове:

width:140px;

така:

width:50px;

Така ще може да добавиш още някоклко изображения.

4pm7xqva.png



#17 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 10 януари 2014 - 14:30

Немога да разбера вчера нямаше проблеми с картинката в slider-a неска вижте как излиза:

Прикачен файл  1.PNG   594,56K   0 Брой сваляния



#18 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 10 януари 2014 - 14:55

Свали си картинката на компютъра и после я качи в папката на скина и тогава дай линк към нея....

Ето така :

background: url({style_images_url}/името–на–твоята–снимка.png);

Така се получава, защото сайта който хоства картинката я е премахнал.



#19 Dragomir

Dragomir

    SIMPLE

  • VIP
  • PipPipPip
  • 203 Мнения:
Уроци

Публикувано 10 януари 2014 - 15:05

Пак е така :(



#20 Silence

Silence

    Напреднал

  • VIP
  • PipPipPip
  • 127 Мнения:
  • IPB версия:3.4
  • Форум URL
  • Град:Хасково/Свиленград
Уроци

Публикувано 10 януари 2014 - 16:19

Бъркаш някъде ...прати ми данни за тийм вайвър за да ти го оправя.....

 

 

ооооооооооо:

background: url(url(http://gameslounge.info/public/style_images/Dynamic/slider.png);margin:auto;-webkit-box-shadow:0 8px 6px -6px black;-moz-box-shadow:0 8px 6px -6px black;box-shadow:0px 8px 6px -6px black}.accordian ul{}.accordian li{position:relative;display:block;width:50px;float:left;border-left:1px solid #888;-webkit-box-shadow:0 0 25px 10px rgba(0,0,0,0.5);-moz-box-shadow:0 0 25px 10px rgba(0,0,0,0.5);transition:all 0.5s;-webkit-transition:all 0.5s;-moz-transition:all 0.5s}.accordian ul:hover li{width:50px}.accordian ul li:hover{width:650px}.accordian li img{display:block}.image_title{background:rgba(0,0,0,0.5);position:absolute;left:0;bottom:0;width:650px}.image_title a{display:block;color:#fff;text-decoration:none;padding:20px;font-size:16px}.mod{padding-top:25px;margin-left:10px;position:absolute}.mod li{border:none !important}.mod ul{margin-bottom:5px}.nstatsNumber,.nstatsText{display:block;text-align:center;color:black;line-height:23px;text-transform:uppercase;font-size:16px}.nstatsText{color:black;font-size:11px}.ipsSideBlock h3.csbNoCollapse:hover .mod_links{opacity:0.0}.ipsSideBlock h3.csbNoCollapse a{display:none};


Ето ти кода  

background: url({style_images_url}/slider.png);

Ето решението на проблема ..... 

 

Качи си във фтп тази картинка:

 

Прикачен файл  slider.png   16,14K   0 Брой сваляния

 

Отиди в Css-a и промени 

background: #000000;

на :

background: url({style_images_url}/slider.png) no-repeat;

веднага под него постави следният ред"

background-position-x: right;

Намери това :

.accordian li {
position: relative;
display: block;
width: 50px;
float: left;
border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

Замени го с това:

.accordian li {
position: relative;
display: block;
width: 140px;
float: left;
border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

Това е  .... вече не би трябвало да имаш проблем :)




0 потребител(и) четат тази тема

0 потребители, 0 гости, 0 анонимни