Вывод не одного, а двух изображений в попап окне

ag

Захожу иногда
54
0 / 1

Вывод не одного, а двух изображений в попап окне

« : 25.05.2014, 17:55:31 »

http://newterrann.ru/port.php?SECTION_ID=11&ELEMENT_ID=74
вот так хочу, как на этом сайте в данном разделе - слева картинка там как-бы дизайн квартиры, справа, то, что получилось.
То есть вывести при одном клике два изображения, чтобы люди могли сравнить что было-стало, не листая фотки.Кто сталиквался с такой задачей?

Записан

ag

Захожу иногда
54
0 / 1

Re: Вывод не одного, а двух изображений в попап окне

« Ответ #1 : 06.06.2014, 16:24:39 »

ап!кто подскажет?!

Записан

Shustry

Гуру
6434
745 / 3

Re: Вывод не одного, а двух изображений в попап окне

« Ответ #2 : 06.06.2014, 17:20:14 »

Ну написать, в принципе, не сложно.

Записан

fsv

Живу я здесь
2781
411 / 2

Re: Вывод не одного, а двух изображений в попап окне

« Ответ #3 : 06.06.2014, 19:58:55 »

Цитата: ag от 25.05.2014, 17:55:31

вот так хочу, как на этом сайте ...Кто сталиквался с такой задачей?

Судя по вашему сообщению

Цитата: ag от 13.11.2013, 12:23:34

...Канешн сам могу сверстать за пару часиков...

, вы верстальщик? Вы не видете, что на вашем примере ссылкой обернута не картинка, а div? А в нем еще 2, в каждом - по картинке. Все, что в ссылке и выводится.

Записан

Веб-разработка: заказ. Только новая разработка.

ag

Захожу иногда
54
0 / 1

Re: Вывод не одного, а двух изображений в попап окне

« Ответ #4 : 17.07.2014, 15:44:14 »

Самому надо писать галерею, или готовую взять и допилить можно какую?не силеня в PHP

« Последнее редактирование: 17.07.2014, 16:21:05 от ag »

Записан

ag

Захожу иногда
54
0 / 1

Re: Вывод не одного, а двух изображений в попап окне

« Ответ #5 : 17.07.2014, 16:34:22 »

Вот с помощью такого кода работает галерея

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css-1377256566.css"  type="text/css" rel="stylesheet">
<link href="style.css-1329899784.css"   type="text/css" rel="stylesheet">
<link href="styles.css-1377858859.css"  rel="stylesheet">



<!--  -->

<script type="text/javascript" src="jquery.min.js" ></script>

<!-- ************fancybox************* -->
<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js" ></script>
<script type="text/javascript">


$(document).ready(function() {
    $("a.gallery").fancybox();
});
</script>

<link rel="stylesheet" href="jquery.fancybox-1.3.4.css"   />
<!-- ***********end fancybox***********-->
 
</head>
<body>
 

				<div id="content">
<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery("a.fancybox").fancybox();
	});
</script> 
 
<!--  -->

<script>

function  getPageSize(){
       var xScroll, yScroll;
 
       if (window.innerHeight && window.scrollMaxY) {
               xScroll = document.body.scrollWidth;
               yScroll = window.innerHeight + window.scrollMaxY;
       } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
               xScroll = document.body.scrollWidth;
               yScroll = document.body.scrollHeight;
       } else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){ // Explorer 6 strict mode
               xScroll = document.documentElement.scrollWidth;
               yScroll = document.documentElement.scrollHeight;
       } else { // Explorer Mac...would also work in Mozilla and Safari
               xScroll = document.body.offsetWidth;
               yScroll = document.body.offsetHeight;
       }
 
       var windowWidth, windowHeight;
       if (self.innerHeight) { // all except Explorer
               windowWidth = self.innerWidth;
               windowHeight = self.innerHeight;
       } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
               windowWidth = document.documentElement.clientWidth;
               windowHeight = document.documentElement.clientHeight;
       } else if (document.body) { // other Explorers
               windowWidth = document.body.clientWidth;
               windowHeight = document.body.clientHeight;
       }
 
       // for small pages with total height less then height of the viewport
       if(yScroll < windowHeight){
               pageHeight = windowHeight;
       } else {
               pageHeight = yScroll;
       }
 
       // for small pages with total width less then width of the viewport
       if(xScroll < windowWidth){
               pageWidth = windowWidth;
       } else {
               pageWidth = xScroll;
       }
 
       return [pageWidth,pageHeight,windowWidth,windowHeight];
}

function clearStyle(){
$(".my_pop_window img").attr("style", "width:220px;height:220px; clear:both");



}
 
function resize_img(el){
arr = getPageSize();

width=arr[2]/2-100; // С?РёСЂРёРЅР°  
height=width*0.75; // РІС‹СЃРѕС‚Р°  


$(el).addClass("my_pop_window");
$(".my_pop_window img").attr("style", "width:"+width+"px;height:"+height+"px;");






}
jQuery(document).ready(function($){
$("a.gallery_port").fancybox({
		onStart		:	resize_img,
		onClosed	:	clearStyle,
		centerOnScroll:	true,
		overlayOpacity:	0.9,
		overlayColor:	"#000"
	});
})


</script>




<div class="port">
					
					
					
					<a class="gallery_port"   href="#port_row_1">
                    <div  id="port_row_1" class="port_row">

                        <div style="float: left" class="port_img">
                            <img style="width: 220px; height: 220px; " src="whvzdbjh1.jpg"  >
                        </div>

                        <div style="float: left" class="port_img">
                            <img style="width: 220px; height: 220px;" src="pcpyljys 1.JPG" >
                        </div>

                    </div>
					</a>
					
					
					
					<a class="gallery_port" rel="group"  href="#port_row_2">
                    <div  id="port_row_2" class="port_row">

                        <div style="float: left" class="port_img">
                            <img style="width: 220px; height: 220px; " src="oerrbcfy2.jpg" >
                        </div>

                        <div style="float: left" class="port_img">
                            <img style="width: 220px; height: 220px;" src="tszxkgno 2.JPG"  >
                        </div>

                    </div>
					</a>
					
					
					
					<a class="gallery_port" rel="group"  href="#port_row_3">
                    <div  id="port_row_3" class="port_row">

                        <div style="float: left" class="port_img">
                            <img style="width: 220px; height: 220px; " src="phbumimc3.jpg"  >
                        </div>

                        <div style="float: left" class="port_img">
                            <img style="width: 220px; height: 220px;" src="vpfoxlfu 3.JPG"  >
                        </div>

                    </div>
			</div>
  
</body>
</html>

Но как этот код подключить в Joomla, подскажите?! И даже елси подключу стили и скрипты, то вот это все надо будет в ручную прописывать в визуальном редакторе?

Код

<a class="gallery_port" rel="group"  href="#port_row_3">
                    <div  id="port_row_3" class="port_row">

                        <div style="float: left" class="port_img">
                            <img style="width: 220px; height: 220px; " src="phbumimc3.jpg"  >
                        </div>

                        <div style="float: left" class="port_img">
                            <img style="width: 220px; height: 220px;" src="vpfoxlfu 3.JPG"  >

Записан

Вывод на сайт Balboa gallery Автор kushiy	Ответов: 7 Просмотров: 3713	07.02.2020, 13:13:00 от kushiy
sigplus - есть возмость настроить вывод картинок по строкам-столбцам? Автор TheEd	Ответов: 1 Просмотров: 3696	25.12.2019, 16:09:55 от TheEd
Галерею изображений Автор mihsmol	Ответов: 1 Просмотров: 1778	02.04.2018, 11:53:41 от effrit
sigplus - пишет в галерее нет изображений Автор Bath1	Ответов: 4 Просмотров: 2055	29.03.2018, 09:27:32 от Bath1
[РЕШЕНО]Как и чем реализовать данный вывод Автор lexxbry	Ответов: 4 Просмотров: 2015	12.10.2017, 10:50:34 от lexxbry

Вывод не одного, а двух изображений в попап окне - Галереи

Новости Joomla

VKGallery — плагин вставки альбомов VK для Joomla.VKGallery — расширение для Joomla 3.x–5

Swiper.js, документация на русском языке

Модуль материалов Joomla на Vue.js.Модуль выводит материалы с помощью JavaScript фреймворка Vue.js

ag

Вывод не одного, а двух изображений в попап окне

ag

Re: Вывод не одного, а двух изображений в попап окне

Shustry

Re: Вывод не одного, а двух изображений в попап окне

fsv

Re: Вывод не одного, а двух изображений в попап окне

ag

Re: Вывод не одного, а двух изображений в попап окне

ag

Re: Вывод не одного, а двух изображений в попап окне

Похожие темы