• 239 Рейтинг в галерее звёздочками на jQuery • 
Теперь рейтинги проставляются мгновенно
При создании темы о модах для двигателя форумов phpBB ветки до версии 3.0.14 название темы должно начинаться с названия мода на английском, без указания версии, затем тире, затем короткое название мода на русском с маленькой буквы. Создание тем не о модах в данном подфоруме запрещено. Посторонние темы о двиге и посторонних проблемах для ветки до версии 3.0.14 в соседнем подфоруме.

    239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Александр Лешванов 25 апр 2017, 12:44

Дор РЕЙТИНГИ В ГАЛЕРЕЕ ЗВЕЗДОЧКАМИ с мгновенным просчетом
Ставить рейтинги изображениям в галерее желания не было ни какого. Долго и не интересно, плюс - дополнительная перезагрузка страницы. До той поры, пока за рейтинги не взялась Татьяна5. Теперь рейтинги проставляются мгновенно и выглядит это дело теперь довольно симпатично. Нажали на звездочку, которую считаете по 20-ти бальной шкале, и.....

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP
Монитор: 1152 x 864 1152 x 864

  239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Александр Лешванов 25 апр 2017, 12:45

Все готово сразу и мгновенно. Итог уже выведен на экран....

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Татьяна5 25 апр 2017, 12:52

Рейтинг звёздочками с отправкой без перезагрузки страницы (на jQuery)
v.0.0.1
Сделано для 5, 10 и 20 звёздочек
language/ru/mods/gallery.php
Найти
Код: выделить все
   'RATING'                  => 'Оценок',

Добавить после
Код: выделить все
   'RATING_AJAX_STRINGS'           => ', ваша оценка:',
   'RATING_AJAX_STRINGS2'          => '(1 оценка, ваша оценка:',

Найти
Код: выделить все
   'YOUR_RATING'               => 'Ваша оценка',

Добавить после
Код: выделить все
   'YOUR_VOTE_COUNTED'             => 'Ваш голос принят!',

styles/prosilver/template/overall_header.html
Найти
Код: выделить все
</head>

Добавить до
Код: выделить все
<!-- IF SCRIPT_NAME == "image_page" or SCRIPT_NAME == "comment" -->
    <script src="http://malsup.github.com/jquery.form.js"></script>
<!-- ENDIF -->

(либо скачать этот скрипт на свой сервер и подключить)
styles/prosilver/template/gallery/comment_body.html
Найти
Код: выделить все
         <!-- IF S_ALLOWED_TO_RATE -->
            <dl>
               <dt><label>{L_YOUR_RATING}:</label></dt>
               <dd>
               <!-- IF .rate_scale -->
                  <select name="rating">
                  <!-- BEGIN rate_scale -->
                     <!-- IF rate_scale.RATE_POINT == 1 --><option value="0">{L_DONT_RATE_IMAGE}</option><!-- ENDIF -->
                     <option value="{rate_scale.RATE_POINT}">{rate_scale.RATE_POINT}</option>
                  <!-- END rate_scale -->
                  </select>
               <!-- ELSE -->
                  {CONTEST_RATING}
               <!-- ENDIF -->
               </dd>
            </dl>
         <!-- ENDIF -->

Заменить на
Код: выделить все
         <!-- IF S_ALLOWED_TO_RATE -->
            <dl>
               <dt><label class="star-rating-label">{L_YOUR_RATING}:</label><span id="you_rating">&nbsp;</span></dt>
               <dd class="star-rating">
                  <!-- IF .rate_scale -->
                     <!-- BEGIN rate_scale -->
                        <input type="radio" name="rating" value="{rate_scale.RATE_POINT}" /><i></i>
                     <!-- END rate_scale -->
               <!-- ELSE -->
                  {CONTEST_RATING}
               <!-- ENDIF -->
               
               <script type="text/javascript">
               // <![CDATA[
               $(document).ready(function(){
                  var star = $('.star-rating :radio');
                  var intervalID;
                 
                  $(star).mouseover(function(){
                     $('#you_rating').stop().html(this.value);
                     clearInterval(intervalID);
                  }).mouseout(function(){
                     if ($(star).is(':hidden')) {} else {
                        intervalID=setTimeout(function() {
                           $('#you_rating').html('');
                        }, 2000);
                     }
                  });
                 
                  $(star).change(function(e){
                     e.preventDefault();
                     $('#postform').ajaxSubmit({
                        target: '#output'
                     });
                     
                     $('.star-rating').css('display', 'none');
                     $('.star-rating-label').css('display', 'none');
                     $('#you_rating').html("<span style="color: green;">{L_YOUR_VOTE_COUNTED}</span>");
                  });

               });
               // ]]>
               </script>
               </dd>           
            </dl>
         <!-- ENDIF -->

styles/prosilver/template/gallery/viewimage_body.html
Найти
Код: выделить все
<!-- IF S_IMAGE_REPORTED --><br /><br /><a href="{U_IMAGE_REPORTED}"><span class="error">{L_IMAGE_REPORTED}</span></a><!-- ENDIF -->

Добавить после
Код: выделить все
         <!-- IF S_ALLOWED_TO_RATE -->
            <dl style="font-size: 1.1em; padding-top: 10px;">
               <dt><label class="star-rating-label">{L_YOUR_RATING}:</label><span id="you_rating">&nbsp;</span></dt>
               <dd class="star-rating">
                  <!-- IF .rate_scale -->
                     <!-- BEGIN rate_scale -->
                        <input type="radio" name="rating" value="{rate_scale.RATE_POINT}" /><i></i>
                     <!-- END rate_scale -->
               <!-- ELSE -->
                  {CONTEST_RATING}
               <!-- ENDIF -->
               
               <script type="text/javascript">
               // <![CDATA[
               $(document).ready(function(){
                  var star = $('.star-rating :radio');
                  var intervalID;
                 
                  $(star).mouseover(function(){
                     $('#you_rating').stop().html(this.value);
                     clearInterval(intervalID);
                  }).mouseout(function(){
                     if ($(star).is(':hidden')) {} else {
                        intervalID=setTimeout(function() {
                           $('#you_rating').html('');
                        }, 2000);
                     }
                  });
                 
                  $(star).change(function(e){
                     e.preventDefault(); // <-- important
                     
                     var jsrating = this.value;
                     $('#rating').attr('value',jsrating);
                     
                     $('#postform').ajaxSubmit({
                        target: '#output'
                     });
                     
                     $('.star-rating').css('display', 'none');
                     $('.star-rating-label').css('display', 'none');
                     $('#you_rating').html("<span style="color: green;">{L_YOUR_VOTE_COUNTED}</span>");
                     
                     var strRating = $("#count-rating").html();
                     var countRating = 0;
                     var done = false;
                     
                     var regexp1 = /(d+.d+)s((d+)/;
                     var regexp2 = /(d+)s((d+)/;
                     var letters = /s[^d]D+[^)]/;
                     
                     if ((rArray = regexp1.exec(strRating)) != null) {
                        var meanRating = parseFloat(rArray[1]);
                        var countRating = parseInt(rArray[2]);
                       
                        var countRatingNew = countRating + 1;
                        var meanRatingNew = Math.round(10*(meanRating*countRating + parseInt(jsrating))/countRatingNew)/10;
                       
                        $("#count-rating").html(meanRatingNew + ' (*' + countRatingNew + ' ' + strRating.match(letters) + "{L_RATING_AJAX_STRINGS} " + jsrating + '*)');
                       
                        var done = true;
                     }
                     
                     if(done != true)
                     {
                        if ((rArray = regexp2.exec(strRating)) != null) {
                           var meanRating = parseInt(rArray[1]);
                           var countRating = parseInt(rArray[2]);
                           
                           var countRatingNew = countRating + 1;
                           var meanRatingNew = Math.round(10*(meanRating*countRating + parseInt(jsrating))/countRatingNew)/10;
                           
                           $("#count-rating").html(meanRatingNew + ' (' + countRatingNew + ' ' + strRating.match(letters) + "{L_RATING_AJAX_STRINGS} " + jsrating + ')');
                           
                           var done = true;
                        }
                     }
                     
                     if(done != true)
                     {
                        $("#count-rating").html(jsrating + " {L_RATING_AJAX_STRINGS2}  " + jsrating + ')');
                     }
                  });

               });
               // ]]>
               </script>
               </dd>           
            </dl>
         <!-- ENDIF -->

Найти
Код: выделить все
<dt><label>{L_RATING}:</label></dt>

Найти
Код: выделить все
<dd>

Заменить на
Код: выделить все
<dd id="count-rating">

Найти
Код: выделить все
         <!-- IF S_ALLOWED_TO_RATE -->
            <dl>
               <dt><label>{L_YOUR_RATING}:</label></dt>
               <dd>
                  <!-- IF .rate_scale -->
                     <select name="rating">
                     <!-- BEGIN rate_scale -->
                        <!-- IF rate_scale.RATE_POINT == 1 --><option value="0">{L_DONT_RATE_IMAGE}</option><!-- ENDIF -->
                        <option value="{rate_scale.RATE_POINT}">{rate_scale.RATE_POINT}</option>
                     <!-- END rate_scale -->
                     </select>
                     <!-- IF (not S_ALLOWED_TO_COMMENT or S_HIDE_COMMENT_INPUT) and .rate_scale -->
                        <input type="submit" name="submit" value="{L_SUBMIT}" class="button1" />
                     <!-- ENDIF -->
                  <!-- ELSE -->
                     {CONTEST_RATING}
                  <!-- ENDIF -->
               </dd>
            </dl>
         <!-- ENDIF -->

Заменить на
Код: выделить все
         <input type="hidden" name="rating" id="rating" />

styles/prosilver/theme/gallery.css
Найти
Код: выделить все
input.autowidth-gallery {
   width: 96%;
   max-width: 186px;
}

Добавить после (только 1 код на выбор):
5 звёздочек
Код: выделить все
/* Stars */
.star-rating {
   font-size: 0;
   white-space: nowrap;
   display: inline-block;
   width: 100px;
   height: 20px;
   overflow: hidden;
   position: relative;
   background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
   background-size: contain;
}
.star-rating i {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 20%;
   z-index: 1;
   background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
   background-size: contain;
}
.star-rating input {
   -moz-appearance: none;
   -webkit-appearance: none;
   opacity: 0;
   display: inline-block;
   width: 20%;
   height: 100%;
   margin: 0;
   padding: 0;
   z-index: 2;
   position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
   opacity: 1;
}
.star-rating i ~ i {
   width: 40%;
}
.star-rating i ~ i ~ i {
   width: 60%;
}
.star-rating i ~ i ~ i ~ i {
   width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
   width: 100%;
}

10 звёздочек
Код: выделить все
/* Stars */
.star-rating {
   font-size: 0;
   white-space: nowrap;
   display: inline-block;
   width: 200px;
   height: 20px;
   overflow: hidden;
   position: relative;
   background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
   background-size: contain;
}
.star-rating i {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 10%;
   z-index: 1;
   background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
   background-size: contain;
}
.star-rating input {
   -moz-appearance: none;
   -webkit-appearance: none;
   opacity: 0;
   display: inline-block;
   width: 10%;
   height: 100%;
   margin: 0;
   padding: 0;
   z-index: 2;
   position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
   opacity: 1;
}
.star-rating i ~ i {
   width: 20%;
}
.star-rating i ~ i ~ i {
   width: 30%;
}
.star-rating i ~ i ~ i ~ i {
   width: 40%;
}
.star-rating i ~ i ~ i ~ i ~ i {
   width: 50%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i{
   width: 60%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 70%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 90%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 100%;
}

20 звёздочек
Код: выделить все
/* Stars */
.star-rating {
   font-size: 0;
   white-space: nowrap;
   display: inline-block;
   width: 400px;
   height: 20px;
   overflow: hidden;
   position: relative;
   background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
   background-size: contain;
}
.star-rating i {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 5%;
   z-index: 1;
   background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
   background-size: contain;
}
.star-rating input {
   -moz-appearance: none;
   -webkit-appearance: none;
   opacity: 0;
   display: inline-block;
   width: 5%;
   height: 100%;
   margin: 0;
   padding: 0;
   z-index: 2;
   position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
   opacity: 1;
}
.star-rating i ~ i {
   width: 10%;
}
.star-rating i ~ i ~ i {
   width: 15%;
}
.star-rating i ~ i ~ i ~ i {
   width: 20%;
}
.star-rating i ~ i ~ i ~ i ~ i {
   width: 25%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i{
   width: 30%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 35%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 40%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 45%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 50%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 55%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 60%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 65%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 70%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 75%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 85%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 90%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 95%;
}
.star-rating i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i ~ i{
   width: 100%;
}
Аватар пользователя
Татьяна5
Профессор форума
Профессор форума 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Татьяна5 25 апр 2017, 12:54

А исчезновение после нажатия помедленней можно?

Найти (в 2-х файлах)
Код: выделить все
$('.star-rating :radio').change(function(){

Заменить на
Код: выделить все
$('.star-rating :radio').delay(1000).change(function(){

1000 - задержка в миллисекундах
Аватар пользователя
Татьяна5
Профессор форума
Профессор форума 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Александр Лешванов 25 апр 2017, 12:58

Заходим -

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Александр Лешванов 25 апр 2017, 12:59

Решаем и нажимаем -

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Александр Лешванов 25 апр 2017, 13:00

В итоге получаем -

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Александр Лешванов 25 апр 2017, 13:04

Наработка от Татьяна5 навеяла мысль сделать небольшое приближение превьюшек при наведении на них в блоке recent_body.html.
В галерейный CSS gallery.css добавляем новый класс:
Код: выделить все
.menu-header img {
   -webkit-transition: all 400ms linear 0s;
   -o-transition: all 400ms linear 0s;
   -moz-transition: all 400ms linear 0s;
   transition: all 400ms linear 0s;
}
.menu-header img:hover {
   -ms-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   -moz-transform: scale(1.2);
   transform: scale(1.2);
}

(например прям перед .icon-gallery {)
Затем открываем imageblock_body.html
Находим строку:
Код: выделить все
<span class="genmed">{imageblock.imagerow.image.UC_THUMBNAIL}</span>

Находим в ней:
Код: выделить все
<span class="genmed">

Заменяем на:
Код: выделить все
<span class="genmed menu-header">

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP

  239 Рейтинг в галерее звёздочками на jQuery

Сообщение Разместил Александр Лешванов 25 апр 2017, 13:04

В спокойном состоянии -

Аватар пользователя
Александр Лешванов
(можно Николаич)
(можно Николаич) 
*
Google Chrome 49.0.262 Google Chrome 49.0.262
Windows XP Windows XP
Следующая страница

Вернуться в 450 модов движка форумов phpBB (до версии 3.0.14)



 • Блок вывода аналогичных по названию других тем нашего форума • 

HTML5 Validated Счетчик ИКС Яндекс.Метрика
cron