Question

как сделать увеличение картинки по клику на форуме?

Answer 1

Зачем создавать что-то новое если уже встроено системно:

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

Comments

а можно сделать чтоб по bb кодам увеличивалось?

---

M_Izmailov,

Вероятно можно, но здесь не обойтись без java script, много мороки будет с этим, придется прописать условия для завертывания всех фото в <a href="ссылка на фото"></a> далее прописать условие добавления класса ulightbox

Посмотрю, может чего получится, если нет, обращайтесь на биржу фриланса - https://upartner.pro/

---

Yuri_Geruk,

хорошо.......

---

M_Izmailov,

В общем, что-то сделал, проверил у себя на форуме, работает, в общий вид страниц форума перед тегом </body> ставим скрипт:

***Увеличение изображений в модуле форум по клику - Версия: 0.0.1***

<script>
$(".posttdMessage img").each(function() {
$(this).wrap("<a href='" + this.src + "'/>");
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox').attr("data-fancybox-group", "ultbx");
});
</script>

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

Проверить как работает можно вот здесь - http://ups.clan.su/forum/2-2-1#18 там ниже есть 2 фото.

Немного переделал скрипт и прицепил к изображению свой отдельный класс, чтобы можно было не зависеть от postmessage:

***Увеличение изображений в модуле форум по клику - Версия: 0.0.2***

<script>
$(document).ready(function() {
 $(".posttdMessage img").each(function() {
 var $this = $(this);
 var src = $this.attr('src');
 $this.addClass('images');
 var a = $('<a/>').attr('href', src);
 $this.wrap(a);
 $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox').attr("data-fancybox-group", "ultbx");
 });
}); 
</script> 

после в стилях уже задаем все для класса:

img.images {max-width: 250px;margin: 2px;border: 3px solid #fff;box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.59);}

в данном случае будет намного удобней, так как задаем мы отдельные стили, а не общие для всех фото в posttdMessage

---

Yuri_Geruk,

У меня есть один код в CSS, который автоматически уменьшает картинку на форуме, при этом картинка не искожается, а просто уменьшается. Возник вот такой вот вопрос, а как можно код CSS использовать с данным скриптом, что бы картинка открывалась в новой вкадке?

Вот сам код.

.posttdMessage img {max-width:650px;margin: 2px;box-shadow:0px 0px 6px #000; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}  
.posttdMessage img {max-height:500px;margin: 2px;box-shadow:0px 0px 6px #000; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}

 

---

trem200,

Так это просто стили и они у вас копируют друг друга, лучше сделать так:

.posttdMessage img {max-width:650px;max-height:500px;margin: 2px;box-shadow:0px 0px 6px #000; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}  

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