Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Общие вопросы » JQuery галерея, присвоить каждому посту свой id?

JQuery галерея, присвоить каждому посту свой id?


     Общие вопросы, jQuery, Ламерские вопросы    886

вопрос
Всем привет. Сразу извиняюсь если не правильно сформулировал вопрос. есть галерея выводиться типом:

<section id="least">
             <div class="least-preview"></div>
      
             <ul class="least-gallery">
<li><a href="ссылка_на_оригинал" data-subtitle=""><img src="ссылка_на_копию"></a></li>
<li><a href="ссылка_на_оригинал" data-subtitle=""><img src="ссылка_на_копию"></a></li>
<li><a href="ссылка_на_оригинал" data-subtitle=""><img src="ссылка_на_копию"></a></li>

</section>


и

<script>
            $(document).ready(function(){
                $('.least-gallery').least();
            });
        </script>

а также сам скрипт:

(function($){ 
	$.fn.least = function(options) {
		var settings = $.extend({
			'random': true,
			'scrollToGallery': true,
			'HiDPI': false
		}, options);

		return this.each(function() {

			/* Open Images */
			function intipreview(object, path, caption) {
				/*var */
				var close = $(''),
					img = $('<img src="' + path + '"/>'),
					thumb = $('li a')

				/* Load img */
				img.load(
					function() {
						if ( caption.length ) {
							object.html('<article>' + caption + '</article>');
						} else {
							object.html('');
						}

						object						
							.prepend(img)
							.append(close)
							.slideDown('slow')
							thumb.removeClass('load');
					}
				);
				
				/* Close Fullscreen */		
				close.on(
					'click',
					function() {
						$('.least-preview').slideToggle('slow');
						thumb.removeClass('active');
					}
				);
			}

			/* Thumbnail */
			$(this).find('li a').click(
				function(e) {

					/* var */
					var $$ = $(this),
						path = $$.attr('href'),
						preview = $('.least-preview'),
						previewImg = preview.children('img'),
						caption = $$.attr('data-caption') || '';

					/* Same Image */
					if ( previewImg.length && path === previewImg.attr('src') ) {
						preview.slideToggle('slow');

						$$.toggleClass('active');
							
						return;
					}

					/* Other Image */
					if ( previewImg.length ) {

						$$.addClass('active');
						$('.least-gallery li a.active').removeClass('active');

						preview.slideUp(
							'slow',
							function() {
								intipreview(
									preview,
									path,
									caption
								);
							}
						);

					/* First Image */
					} else {
						intipreview(
							preview,
							path,
							caption
						);
					}

					/* Add Loading bar */
					$$.addClass('load active');
				}
			);
			
			/* Random Images - looked up from jquery forum */
			if(settings.random) {
				$('.least-gallery').each(function(){
					var ul = $(this),
						li = ul.children('li');
						
						li.sort(function() {
							var	temp = parseInt( Math.random()*8, null ),
								OddEven = temp%4,
								PosNeg = temp>2 ? 1 : -1;
								
								return ( OddEven*PosNeg );
						})
						.appendTo(ul);
				});
			}

			/* Scroll to Top */
			if(settings.scrollToGallery) {
				$(this).find('li a').click(
					function(e) {
						e.preventDefault();

						$('html, body').animate(
							{ 
								scrollTop: $('#least').offset().top
							}, 500 
						);
					}
				);
			}

			/* Support Retina Image - Inspiration https://bensmann.no */
			if(settings.HiDPI) {
				if(window.devicePixelRatio > 1) {
					/* var's */
					var image_thumb = $('#least img'),
						image_big = $('#least a');

					/* Replace images with @2x */
					for(var i = 0; i < image_thumb.length && image_big.length; i++) {
						var src = image_thumb[i].src,
							href = image_big[i].href,
							j = src.lastIndexOf('.'),
							k = href.lastIndexOf('.');

							src = src.substr(0,j) + '@2x' + src.substr(j);
							href = href.substr(0,k) + '@2x' + href.substr(k);

							image_thumb[i].src = src;
							image_big[i].href = href;
					}
				}
			}
		});
	};
})(jQuery);

Все хорошо работает, НО!
если листать в первом посте картинке во всех остальных она тоже меняется (все даже логично)
Вопрос: как можно присвоить ID к каждому посту, чтобы он передавался на скрипт?
Предположим я могу присвоить id в посте таким образам:

<section id="least{id}">
             <div class="least-preview{id}"></div>
      
             <ul class="least-gallery{id}">
<li><a href="ссылка_на_оригинал" data-subtitle=""><img src="ссылка_на_копию"></a></li>
<li><a href="ссылка_на_оригинал" data-subtitle=""><img src="ссылка_на_копию"></a></li>
<li><a href="ссылка_на_оригинал" data-subtitle=""><img src="ссылка_на_копию"></a></li>

</section>

но как ткнуть пальцем скрипту, чтобы он понял в каком посте листать изображения?
Если поможет сайт: Не реклама

Ответа пока нет


4 комментария

pahuchiy
Юзер

pahuchiy - -

{news-id} - ID номер новости, это номер под которым данная новость храниться в базе данных
https://dle-news.ru/extras/online/all16.html

kent_new
Юзер

kent_new - -

это понятно, а вот как сделать чтобы скрипту отправлять этот id, и чтобы он менял картинку не в общей <div class="least-preview"></div> а к примеру least-preview2

pahuchiy
Юзер

pahuchiy - -

<script>
$("div.least-preview{id}").find("ul").addClass("least-gallery{id}")
</script>


Как вариант на JS.
В блоке least-preview{id} ищем ul и добавляем least-gallery{id}

kent_new
Юзер

kent_new - -

я дико извиняюсь, как передать параметр id в скрипт, что бы он менял картинку не в least-preview а к примеру least-preview-параметр

Похожие вопросы

 12.06.2014 never3d222  Общие вопросы
наверх