Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: При клике поменять местами картинки

Добрый день!
Подскажите как реализовать данную задачу?


Имеется ряд картинок (навигация), при нажатии на одну сверху выводится
Ответ:
Сообщение от Low_Weaper
как реализовать данную задачу?
Как вариант...
- в обработчике клика узнать нужный УРЛ картинки
- изменить УРЛ большей картинки на нужный
Вопрос: Запрет правого клика блокирует всплывающую картинку в опере

Всем привет. На сайте добавил скрипт для запрета клика правой кнопкой мыши. В хроме, мозиле, эксплоре все четко, а вот в опере правый клик-то блокируется, но это влияет на всплывающую картинку, реализованную с помощью lightbox fancybox, причем, если кликнуть на превью по бокам, то всплывающая картинка появляется, а если нажать на превью по центру, то нет - отчего так? вот такой скрипт
<!--
var message = "";

function clickIE() {
  if (document.all) {
    (message);
    return false;
  }
}

function clickNS(e) {
  if (document.layers || (document.getElementById && !document.all)) {
    if (e.which == 2) {
      (message);
      return false;
    }
  }
}
if (document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown = clickNS;
} else {
  document.onmouseup = clickNS;
  document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
  -- >

или такой
<!--
///////////////////////////////////
function clickIE4() {
  if (event.button == 2) {
    return false;
  }
}

function clickNS4(e) {
  if (document.layers || document.getElementById && !document.all) {
    if (e.which == 2 || e.which == 3) {
      return false;
    }
  }
}
if (document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown = clickNS4;
} else if (document.all && !document.getElementById) {
  document.onmousedown = clickIE4;
}
document.oncontextmenu = new Function("return false")
  // -->
Ответ:
Сообщение от Deff
ligisayan,
Какова цель запрета правой кнопки мыши ? Усложнить жизнь пользователю ?
Отключайте oncontextmenu при наведении на кликабельную картинку, возвращайте при отведении с картинки или клику на закрытие всплывающей картинки
Deff, да, защита от дурака
имеете ввиду вот так?
document.oncontextmenu = zapret; 
function zapret() {
return false
}
Вопрос: Появление видео при клике на объект

Помогите, пожалуйста, реализовать.
Есть картинка. Надо, чтобы при клике на эту картинку появлялось окошко, а в нём было вставленное iframe видео.
И вверху был крестик, при нажатии на который это окошко обратно закрывается, ну и, разумеется, видео в нём пропадает.

Вот, например, как тут .
При клике на ёлочную звезду или окошко почту появляется окошко с чем-либо. А при клике на сам сайт (вне окошка), это окно закрывается. Но вырезать с этого сайта я не смог
Ответ:
Сообщение от Ellusion
Есть картинка. Надо, чтобы при клике на эту картинку появлялось окошко, а в нём было вставленное iframe видео.
И вверху был крестик, при нажатии на который это окошко обратно закрывается, ну и, разумеется, видео в нём пропадает.
В чем сложность конкретно? Покажите ваши наработки. Хотя бы вашу разметку (html-css) для начала.
Вопрос: Как сделать сортировку картинок?

Как сделать сортировку картинок, чтобы при нажатии на кнопки-фильтры("красные","синие") появлялись нужные картинки?
Ответ:
Сообщение от IraIraIra
Как сделать сортировку картинок, чтобы при нажатии на кнопки-фильтры("красные","синие") появлялись нужные картинки?
С помощью разнообразных функций, методов и свойств объектов великолепного JS
Если что не получается, выкладывайте код, поможем.
Вопрос: Что-то не работает: смена картинки по клику.

Здравствуйте.

Мне необходим скрипт, в котором по клику на картинку она сменялась на другую, потом на третью.

Я нашёл вполне понятный код, сохранил этот код в index.html, но почему-то он не работает. У меня есть 3 картинки: note.png, note_30.png, note_30_.png, я исправил код в соответствии с этими картинками. На экране появляется картинка note.png. Но клик не происходит, картинка не меняется. Все картинки лежат в той же папке, что и индекс. Что я сделал не так?

Вот код:

<html>
    <head>
    <title>Смена картинок</title>
    <script language="javascript">
    var i=0;
    var image=document.getElementById("image");
    var imgs=new Array('note.png','note_30.png', 'note_30_.png');
    function imgsrc(){
    i++;
    image.src=imgs[i];
    }
    </script>
    </head>
    <body>
    <img id="image" src="note.png" onClick="imgsrc();">
    </body>
    </html>


Для того, чтобы увидеть скрипт в действии, загрузил его на временный хост:
Ответ: При таком десктопном подходе, тебе не нужна функция, хватит инлайнового кода:

<img src="note.jpg" alt="" onclick="this.src = imgs[Math.min(++i,imgs.length-1)]">
Вопрос: Как за кликом (onclick) старую картинку убирать, а новую ставить ?

То есть , есть две картинки и массив с именами картинок. Как нажав на одну картинку всплыла другая и когда я нажал вновь , то она взяла с массива следующую и поставила место предыдущей!

<td width="14%" height="300">

<center> <img border="3" id='img1' src="Picture/b.gif" width="73" height="97" onclick="UpdateCard26()"> </center>

</td>

<td width="14%">

<center> <img border="3" id="img2" src="Picture/b.gif" width="73" height="97"> </center>

</td>




var pictures = [1,1,2,2,,4,,gf,b,ng,r,ng,fhn, bla bla bla]; /массив

function Update(){ //функция что меняет картинку

if( я нажал на картинку ) { а как перебрать массив не знаю и как правильно поставить слушатель !!!



document.getElementById('img2').src = 'Picture/' + picture[i] + '.gif';
}
}



Заранее СПАСИБО!
Ответ:
Сообщение от Daniok
можно еще спросить по поводу JavaScript ?
для открытия новых тем на форуме ничьих разрешений не требуется
Вопрос: Загрузка нужной картинки.

Добрый день.
Тема, думаю, очень простая, но я с ней сталкиваюсь впервые и прошу просветить.
Есть блок с галереей, скажем так 6 дивов, внутри которых ссылка > картинка. В дальнейшем это реализуется, как popup, и поэтому нужно при клике на, например, 1.jpg в скрытом диве, который появляется по событию клик "вываливалась" именно та картинка, на которую я нажал.
Подгружалась, скажем так.
Ответ: slavAAvals,
Вопрос: SOS!!! картинка не правильно отображается

$(function() {

var $windowWidth = $(window).width(),
$windowHeight = $(window).height(),
$imgPreviewBlock = $("section#img_preview").hide(),
$imgPreviewHeader = $imgPreviewBlock.find("h2"),
$imgPreviewBlockFigure = $imgPreviewBlock.find("figure").css("cursor", "default"),
$imgPreview = $("section#img_preview img").css("cursor", "default"),
$previewCounter = $imgPreviewBlock.find("span"),
$sectionProductFoto = $("section#product_foto"),
$sectionProductHeader = $sectionProductFoto.find("h2"),
$mainProductFotofigure = $sectionProductFoto.find("figure.main_product_foto "),
$mainProductFoto = $mainProductFotofigure.find("img"),
$productFotoList = $sectionProductFoto.find("ul#foto_list"),
$productFotoBlockLi = $productFotoList.find("li"),
$foto = $productFotoBlockLi.find("img"),
$activeImg = $foto.filter(".main"),
$activeImgSrc = $activeImg.attr("src"),
$openFotoPreview = $("figure.foto_block"),
$fotoControlButtons = $imgPreviewBlock.find(".button"),
$fotoControlButtonsArrows = $imgPreviewBlock.find(".arrows"),
$imgPreviewBlockTitle = $imgPreviewBlock.find("p"),
$imgPreviewBlockHeader = $imgPreviewBlock.find("h2"),
$gallery = $("section#foto_gallery"),
$galleryBlock = $gallery.find("ul"),
$galleryItems = $galleryBlock.find("li"),
$galleryItemsLength = $galleryItems.length,
$galleryImg = $galleryItems.find("img"),
$transitionClass = $("section#foto_gallery ul li figure figcaption").css({"transition": "all 0.2s ease"});


$mainProductFoto.attr("src", $activeImgSrc);

//функция смены картинки для главной картинки блока с товаром

function changeImg() {

var $this = $(this),
$newFoto = $this.attr("src");

if ($foto.hasClass("main")) {

$mainProductFoto.attr("src", $newFoto);
$foto.removeClass("main");
$this.addClass("main");

}

}

//функция просмотра картинки

function openFotoPreview() {

var $this = $(this),
$actionImg = $this.find("img"),
$apt = $actionImg.parents("li"),
$imgNumber = $apt.index() + 1,
$app = $apt.find("p"),
$actionGalleryTitle = $app.html(),
$fotosrc = $actionImg.attr("src"),
$imgPreviewWidth = $imgPreview.width(),
$imgPreviewHeight = $imgPreview.height();


$imgPreview.addClass("position");

//определяем размермы картинки и делаем для них стили

if ($imgPreviewWidth > $windowWidth) {

$imgPreview.css({
"width": "100" + "%",
"height": "auto"
});

} else if ($imgPreviewWidth < $windowWidth) {

$imgPreview.css({
"width": "auto",
"height": "100" + "%"
});

}



//закончили, и открываем по клику блок просмотра картинки

if ($this.hasClass("main_product_foto")) {

$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.show();
$imgPreviewBlockHeader.show();
$previewCounter.hide();
$imgPreviewBlockTitle.hide();
$imgPreviewHeader.html($sectionProductHeader);
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);

} else if ($this.hasClass("gallery")) {

$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.show();
$imgPreviewBlockHeader.hide();
$previewCounter.show();
$imgPreviewBlockTitle.show();
$previewCounter.html($imgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);
$actionImg.addClass("gallery_active_foto");
$imgPreviewBlockTitle.html($actionGalleryTitle);
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);

} else {

$imgPreview.attr("src", $fotosrc);
$fotoControlButtonsArrows.hide();
$previewCounter.hide();
$imgPreviewBlockHeader.hide();
$imgPreviewBlockTitle.hide();
$imgPreviewBlock.show();
alert([$imgPreview.width(),$windowWidth]);
}

}

function fotoPreviewControl() {

var $this = $(this),
$activeFoto = $foto.filter(".main"),
$activeFotoSrc = $activeFoto.attr("src"),
$activeLi = $activeFoto.parents("li"),
$nextLi = $activeLi.next(),
$nextFoto = $nextLi.find("img"),
$prevLi = $activeLi.prev(),
$prevFoto = $prevLi.find("img"),
$firstLi = $productFotoBlockLi.first(),
$firstFoto = $firstLi.find("img"),
$lastLi = $productFotoBlockLi.last(),
$lastFoto = $lastLi.find("img"),
$allImages = $("img"),
$activeGalleryFoto = $allImages.filter(".gallery_active_foto"),
$activeGalleryItem = $activeGalleryFoto.parents("li"),
$firstGalleryItem = $galleryItems.first(),
$firstGalleryFoto = $firstGalleryItem.find("img"),
$lastGalleryItem = $galleryItems.last(),
$lastGalleryFoto = $lastGalleryItem.find("img"),
$nextGalleryItem = $activeGalleryItem.next(),
$nextGalleryFoto = $nextGalleryItem.find("img"),
$prevGalleryItem = $activeGalleryItem.prev(),
$prevGalleryFoto = $prevGalleryItem.find("img"),
$nextGalleryTitle = $nextGalleryItem.find("p"),
$nextGalleryTitleText = $nextGalleryTitle.html()
$prevGalleryTitle = $prevGalleryItem.find("p"),
$prevGalleryTitleText = $prevGalleryTitle.html(),
$firstGalleryTitle = $firstGalleryItem.find("p"),
$firstGalleryTitleText = $firstGalleryTitle.html()
$lastGalleryTitle = $lastGalleryItem.find("p"),
$lastGalleryTitleText = $lastGalleryTitle.html(),
$firstImgNumber = $firstGalleryItem.index() + 1,
$lastImgNumber = $lastGalleryItem.index() + 1,
$nextImgNumber = $nextGalleryItem.index() + 1,
$prevImgNumber = $prevGalleryItem.index() + 1;



if ($this.hasClass("right")) {

if ($activeGalleryFoto.hasClass("gallery_active_foto" )) {

if ($nextGalleryFoto.length) {

$nextGalleryFotoSrc = $nextGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$nextGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($nextGalleryTitleText);
$previewCounter.html($nextImgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);

} else {

$nextGalleryFotoSrc = $firstGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$firstGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($firstGalleryTitleText) ;
$previewCounter.html($firstImgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);

}

} else {

if ($nextFoto.length) {

$nextFotoSrc = $nextFoto.attr("src");
$foto.removeClass("main");
$nextFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);


} else {

$nextFotoSrc = $firstFoto.attr("src");
$foto.removeClass("main");
$firstFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);

}

}

} else if ($this.hasClass("left")) {

if ($activeGalleryFoto.hasClass("gallery_active_foto" )) {

if ($prevGalleryFoto.length) {

$nextGalleryFotoSrc = $prevGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$prevGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($prevGalleryTitleText);
$previewCounter.html($prevImgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);


} else {

$nextGalleryFotoSrc = $lastGalleryFoto.attr("src");
$allImages.removeClass("gallery_active_foto");
$lastGalleryFoto.addClass("gallery_active_foto");
$imgPreview.attr("src", $nextGalleryFotoSrc);
$imgPreviewBlockTitle.html($lastGalleryTitleText);
$previewCounter.html($lastImgNumber + "&nbsp;из&nbsp;" + $galleryItemsLength);

}

} else {

if ($prevFoto.length) {

$nextFotoSrc = $prevFoto.attr("src");
$foto.removeClass("main");
$prevFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);

} else {

$nextFotoSrc = $lastFoto.attr("src");
$foto.removeClass("main");
$lastFoto.addClass("main");
$imgPreview.attr("src", $nextFotoSrc);
}

}

} else if ($this.hasClass("close")) {

$imgPreview.removeClass("position");
$imgPreview.attr("src", "");
$activeGalleryFoto.removeClass("gallery_active_fot o");
$mainProductFoto.attr("src", $activeFotoSrc);
$imgPreviewBlock.hide();

}
}

$foto.on("touchstart, click", changeImg);
$openFotoPreview.on("touchstart, click", openFotoPreview);
$fotoControlButtons.on("touchstart, click", fotoPreviewControl);
});

Доброго времени суток, суть вопроса проста, не мгу сделать так, что бы картинка выводилась с нужными css свойствами. Нужно что бы в зависимости от соотношения размеров экрана и картинки, последняя выводилась либо на всю высоту, если ширина картинки меньше ширины экрана, либо на всю ширину.
Ответ: section#img_preview это пустой блок, который открывается при нажатии на картинку. Типа просмотр. В него вставляются данные при определенных условиях. Все работает, но вот сформировать размер картинки не получается. Поэтому и прошу помощи у знатоков
Вопрос: При клике по кнопкам показывать следующее/предыдуще изображение

Есть слайдер, представляет собой одну большую картинку и миниатюры под ней, со стрелками. Я сделал, что бы при клике по центральной картинке он открывалась и становилась еще больше, подскажите как реализовать переход на следующую/предыдущую картинку кнопками < >

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bxslider1.css">
<script type="text/javascript">
$(document).ready(function() {
	$('.bxslider1').bxSlider({
	pagerCustom: '#bx-pager1'
	});


	
	$('.slider_boxes').on('click','#clacks',function() {
		var srcc = $(this).attr('src');
		$('#shads').fadeIn();
		$('#open_img').attr('src', srcc);
		var img_cl = $('#open_img').attr('class');
		$('#big_imgs').fadeIn();		
		
			$('.slider_boxes').on('click', '.but_left', function() {
				//Появляется предыдущая картинка
			});
			
			$('.slider_boxes').on('click', '.but_right', function() {
				//Появляется с картинка
			});
		
	});
	
	
	
	$('#shads').click(function() {
		$('#shads').fadeOut();
		$('#big_imgs').fadeOut();
	});
	

	
});
</script>



<div id="shads" style="background:#000000;opacity:0.5;width:100%;height:100%;position:fixed;left:0px;top:0px;z-index:700;display:none;"></div>

<div class="slider_boxes">
<div id="big_imgs">
<img src="" id="open_img" width="1100px" height="640px">
	<div class="but_left"></div>
	<div class="but_right"></div>
</div>
<ul class="bxslider1">
  <li><img class="b1" id="clacks"  src="images/1/1-2.jpg" /></li>
  <li><img class="b2" id="clacks"  src="images/1/1-1.jpg" /></li>
  <li><img class="b3" id="clacks"  src="images/1/1.jpg" /></li>
</ul>

<div id="bx-pager1" style="text-align: center;width: 775px;margin-left: auto;margin-right: auto;border-radius: 5px;padding-top: 4px;-moz-box-shadow: 0 0 5px #ccc;-webkit-box-shadow: 0 0 5px #ccc;box-shadow: 0 0 5px #ccc;border: 5px solid #fff;background: #fff;-webkit-transform: translatez(0);-moz-transform: translatez(0);-ms-transform: translatez(0);-o-transform: translatez(0);transform: translatez(0);margin-bottom: 5px;">
 <a style="position:relative;" data-slide-index="0" href=""><img src="images/1_m/3_m.jpg" width="150px" height="100px"/><div id="lupa_z"></div></a>
 <a style="position:relative;" data-slide-index="1" href=""><img src="images/1_m/2_m.jpg" width="150px" height="100px"/><div id="lupa_z"></div></a>
 <a style="position:relative;" data-slide-index="2" href=""><img src="images/1_m/1_m.jpg" width="150px" height="100px"/><div id="lupa_z"></div></a>
</div>
</div>
Ответ: Как сделать вывод предыдущей и следующей картинки
Вопрос: Фоновая картинка в Gulp

Нужные картинки присутствуют в source папке, в той же папке лежит scss файл, использующий имя картинок в, например, _features.scss. Пути в gulpfile.js верны, насколько могу судить.
В build папке index.html не отображает нужные (фоновые) картинки. Где я мог ошибиться?
Ответ: Апну. Другой проект, тоже Галп.
После добавления тестов gulp serve-build работает, но в мозилле вижу cannot get /. Возможно, сервер Кармы работает на другом порте, нежели сервер приложения. Пробовал играть с портами, менять PhantomJS на Мозиллу, результат тот же. Gulp serve-dev перестал работать вовсе.

Прошу пособить отобразить страницу в браузере.