Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 28.09.2018, 06:20
Аспирант
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 72

Выкладываю весь шаблон моего слайдера
<?php
defined('_JEXEC') or die('Restricted access');
$doc = JFactory::getDocument();
$style_image = '
/*.vm-img-desc {display:none;}*/
a.ask-a-question {border:none; background: none;}
.container_image{display: block; height: auto; width: 100%;}
.container_image_all {float: left; height: auto; width: 70px; border: solid 1px #e5e5e5; margin: 5px 5px 0px 0px;}
.one{float: left; display: inline-block; margin: 60px 0px 0px -17px; font-size: 10px;  color: #a9a6a678;}
';
$doc->addStyleDeclaration($style_image);
$document = JFactory::getDocument();
$document->addScriptDeclaration("
$('.placeholder').after().click(function () { $(this).hide(); });
$(function(){ $('#thumbs a').touchTouch(); });
");
echo '<div class="container_image"><div id="thumbs">';
$count_images = count ($this->product->images);
if ($count_images >= 1) { 
    // $start_image = VmConfig::get(1) ? 0 : 1; 
    $start_image = 0;
    }
for ($i = $start_image;  $i < $count_images; $i++) 
{ 
$image = $this->product->images[$i];
 echo '<div class="container_image_all">'.$image->displayMediaThumb(false, true, '', true).'</div>'.'<div class="one" ></div>';
} 
echo '</div></div>';
 
// echo $image->file_meta;
?>
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/jsn_mobilize/touch/css/styles.css" />
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/jsn_mobilize/touch/touchTouch/touchTouch.css" />
 <script src="<?php echo $this->baseurl ?>/templates/jsn_mobilize/touch/touchTouch/touchTouch.jquery.js"></script>

вот touchTouch.jquery.js
/**
 * @name		jQuery touchTouch plugin
 * @author		Martin Angelov
 * @version 	1.0
 * @url			[url]http://tutorialzine.com/2012/04/mobile-touch-gallery/[/url]
 * @license		MIT License
 */
(function(){

	/* Private variables */
	var overlay = $('<div id="galleryOverlay">'),
		slider = $('<div id="gallerySlider">'),
		prevArrow = $('<a id="prevArrow"></a>'),
		nextArrow = $('<a id="nextArrow"></a>'),
		overlayVisible = false;
		/* overlayVisible = true; */

	/* Creating the plugin */
	$.fn.touchTouch = function(){

		var placeholders = $([]),
			index = 0,
			allitems = this,
			items = allitems;

		// Appending the markup to the page
		overlay.hide().appendTo('body');
		slider.appendTo(overlay);

		// Creating a placeholder for each image
		items.each(function(){

			placeholders = placeholders.add($('<div class="placeholder">'));
			
		});

		// Hide the gallery if the background is touched / clicked
		slider.append(placeholders).on('click',function(e){

			if(!$(e.target).is('img')){
				hideOverlay();
			}
		});

		// Listen for touch events on the body and check if they
		// originated in #gallerySlider img - the images in the slider.
		$('body').on('touchstart', '#gallerySlider img', function(e){

			var touch = e.originalEvent,
				startX = touch.changedTouches[0].pageX;

			slider.on('touchmove',function(e){

				e.preventDefault();

				touch = e.originalEvent.touches[0] ||
						e.originalEvent.changedTouches[0];

				if(touch.pageX - startX > 10){

					slider.off('touchmove');
					showPrevious();
				}

				else if (touch.pageX - startX < -10){

					slider.off('touchmove');
					showNext();
				}
			});

			// Return false to prevent image
			// highlighting on Android
			return false;

		}).on('touchend',function(){

			slider.off('touchmove');

		});

		// Listening for clicks on the thumbnails
		items.on('click', function(e){

			e.preventDefault();

			var $this = $(this),
				galleryName,
				selectorType,
				$closestGallery = $this.parent().closest('[data-gallery]');

			// Find gallery name and change items object to only have
			// that gallery

			//If gallery name given to each item
			if ($this.attr('data-gallery')) {

				galleryName = $this.attr('data-gallery');
				selectorType = 'item';

			//If gallery name given to some ancestor
			} else if ($closestGallery.length) {

				galleryName = $closestGallery.attr('data-gallery');
				selectorType = 'ancestor';

			}

			//These statements kept seperate in case elements have data-gallery on both
			//items and ancestor. Ancestor will always win because of above statments.
			if (galleryName && selectorType == 'item') {

				items = $('[data-gallery='+galleryName+']');

			} else if (galleryName && selectorType == 'ancestor') {

				//Filter to check if item has an ancestory with data-gallery attribute
				items = items.filter(function(){

           			return $(this).parent().closest('[data-gallery]').length;

           		});

			}

			// Find the position of this image
			// in the collection
			index = items.index(this);
			showOverlay(index);
			showImage(index);

			// Preload the next image
			preload(index+1);

			// Preload the previous
			preload(index-1);

		});

		// If the browser does not have support
		// for touch, display the arrows
		if ( !("ontouchstart" in window) ){
			overlay.append(prevArrow).append(nextArrow);

			prevArrow.click(function(e){
				e.preventDefault();
				showPrevious();
			});

			nextArrow.click(function(e){
				e.preventDefault();
				showNext();
			});
		}

		// Listen for arrow keys
		$(window).bind('keydown', function(e){

			if (e.keyCode == 37) {
				showPrevious();
			}

			else if (e.keyCode==39) {
				showNext();
			}

			else if (e.keyCode==27) { //esc
				hideOverlay();
			}

		});


		/* Private functions */


		function showOverlay(index){
			// If the overlay is already shown, exit
			if (overlayVisible){
				return false;
			}

			// Show the overlay
			overlay.show();

			setTimeout(function(){
				// Trigger the opacity CSS transition
				overlay.addClass('visible');
			}, 100);

			// Move the slider to the correct image
			offsetSlider(index);

			// Raise the visible flag
			overlayVisible = true;
		}

		function hideOverlay(){

			// If the overlay is not shown, exit
			if(!overlayVisible){
				return false;
			}

			// Hide the overlay
			overlay.hide().removeClass('visible');
			overlayVisible = false;

			//Clear preloaded items
			$('.placeholder').empty();

			//Reset possibly filtered items
			items = allitems;
		}

		function offsetSlider(index){

			// This will trigger a smooth css transition
			slider.css('left',(-index*100)+'%');
		}

		// Preload an image by its index in the items array
		function preload(index){

			setTimeout(function(){
				showImage(index);
			}, 1000);
		}

		// Show image in the slider
		function showImage(index){

			// If the index is outside the bonds of the array
			if(index < 0 || index >= items.length){
				return false;
			}

			// Call the load function with the href attribute of the item
			loadImage(items.eq(index).attr('href'), function(){
				placeholders.eq(index).html(this);
			});
		}

		// Load the image and execute a callback function.
		// Returns a jQuery object

		function loadImage(src, callback){

			var img = $('<img>').on('load', function(){
				callback.call(img);
			});

			img.attr('src',src);
		}

		function showNext(){

			// If this is not the last image
			if(index+1 < items.length){
				index++;
				offsetSlider(index);
				preload(index+1);
			}

			else{
				// Trigger the spring animation
				slider.addClass('rightSpring');
				setTimeout(function(){
					slider.removeClass('rightSpring');
				},500);
			}
		}

		function showPrevious(){

			// If this is not the first image
			if(index>0){
				index--;
				offsetSlider(index);
				preload(index-1);
			}

			else{
				// Trigger the spring animation
				slider.addClass('leftSpring');
				setTimeout(function(){
					slider.removeClass('leftSpring');
				},500);
			}
		}
	};

})(jQuery);

Может всетаки кто подскажет как решить
Ответить с цитированием
  #12 (permalink)  
Старый 10.10.2018, 14:51
Аспирант
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 72

Данный вопрос по прежнему актуален.
Так как js знаю очень плохо помогите решить.
Ответить с цитированием
  #13 (permalink)  
Старый 10.10.2018, 20:45
Интересующийся
Отправить личное сообщение для BSwan Посмотреть профиль Найти все сообщения от BSwan
 
Регистрация: 24.03.2017
Сообщений: 10

window.onload = function(){

	$('.placeholder').click(function(){
		$(this).append('<p><span>.......</span></p>');		
	});
	
}


Но лучше span закрыть стилем CSS и менять класс по клику.

Последний раз редактировалось BSwan, 10.10.2018 в 21:18.
Ответить с цитированием
  #14 (permalink)  
Старый 10.10.2018, 21:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,617

BSwan,

код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, см. http://javascript.ru/formatting
Ответить с цитированием
  #15 (permalink)  
Старый 10.10.2018, 21:19
Интересующийся
Отправить личное сообщение для BSwan Посмотреть профиль Найти все сообщения от BSwan
 
Регистрация: 24.03.2017
Сообщений: 10

рони
Спасибо. )
Ответить с цитированием
  #16 (permalink)  
Старый 11.10.2018, 07:11
Аспирант
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 72

Сообщение от BSwan Посмотреть сообщение
window.onload = function(){

	$('.placeholder').click(function(){
		$(this).append('<p><span>.......</span></p>');		
	});
	
}


Но лучше span закрыть стилем CSS и менять класс по клику.
js код не работает.
span у меня закрыт стилем CSS
.vm-img-desc {display:none;}

открытый span выглядит так
<span class="vm-img-desc">............</span>
Подскажите по подробнее как можно реализовать
Ответить с цитированием
  #17 (permalink)  
Старый 11.10.2018, 11:55
Аспирант
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 72

Как я понимаю что за вывод отвечает сам файл _https://lik-astana.kz/templates/jsn_mobilize/touch/touchTouch/touchTouch.jquery.js и описание скорее всего выводит он но как его правильно настроить я не могу понять.
Ответить с цитированием
  #18 (permalink)  
Старый 11.10.2018, 18:12
Интересующийся
Отправить личное сообщение для BSwan Посмотреть профиль Найти все сообщения от BSwan
 
Регистрация: 24.03.2017
Сообщений: 10

Вот Вам в песочнице пример. Так ведь Вам надо?

http://jsfiddle.net/bsawn/dp2gh87t/

Последний раз редактировалось BSwan, 11.10.2018 в 18:17.
Ответить с цитированием
  #19 (permalink)  
Старый 12.10.2018, 06:11
Аспирант
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 72

вот пример страницы товара если переключить браузер на отображение как на мобильных то откроется мобильный шаблон а при наведении на картинку она откроется а модальном окне вот мне и надо добавить описание к этой картинки.
Переведенный выше код не работает так как он подгружает span с класса .placeholder а в моем случаи span находится в классе container_image_all а класс .placeholder грузит скрипт touchTouch.jquery.js. Возможно ли перехватить span в классе container_image_all и загрузить его по клику в .placeholder
window.onload = function(){
	var divBlock = document.querySelectorAll('.placeholder');

	for(var i=0; i < divBlock.length; i++){
		divBlock[i].onclick = function(){
			this.children['1'].classList.toggle('vm-img-desc'); // 1 это жостко зашитая позиция в nodList
		}
	}     
}

Последний раз редактировалось Stas1985, 12.10.2018 в 06:16.
Ответить с цитированием
  #20 (permalink)  
Старый 12.10.2018, 10:59
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,627

Stas1985,
Попробуйте такой вариант в touchTouch
// Creating a placeholder for each image
		items.each(function(){
                        var plh = $('<div class="placeholder">');
                         plh.append(this.nextElementSibling);
			placeholders = placeholders.add(plh);
			
		});


Правда, там еще есть
$('.placeholder').empty();

Как-то бы это совместить с loadImage

Последний раз редактировалось Dilettante_Pro, 12.10.2018 в 11:11.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу решить задачку. 404flanker Ваши сайты и скрипты 3 09.05.2017 11:43
Не могу выучить javascript. usertest Оффтопик 17 20.03.2016 07:33
Не могу решить ошибку в Angular!? maxprof Angular.js 4 27.07.2015 16:24
Не могу решить задачку по js! Илья! Общие вопросы Javascript 4 25.08.2011 19:26
Не могу решить задачу: Добавление цитаты в textarea,где находистся курсор dummer jQuery 1 24.12.2009 17:17