ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как реализовать загрузку большого изображения по клику на превью (thumbnail)
17 сообщений из 17, страница 1 из 1
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829878
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
Подскажите простой пример как это лучше сделать. лепить окна ради такой мелочи как то не хочется.
...
Рейтинг: 0 / 0
10.12.2014, 10:30
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829881
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
Всяких fancybox-ов и Lightbox-ов существует множество. Выбирайте на вкус.
...
Рейтинг: 0 / 0
10.12.2014, 10:36
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829884
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
miksoft,

а какой-нить пример на jsfiddle покажете?
...
Рейтинг: 0 / 0
10.12.2014, 10:38
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829886
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
redwhite90miksoft,

а какой-нить пример на jsfiddle покажете?На сайте практически любой библиотеки такого рода есть примеры.
Например, fancyBox .
...
Рейтинг: 0 / 0
10.12.2014, 10:40
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829894
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
miksoft,

в этом примере используется один и тот же урл для большой и маленькой картинки. у меня это 2 разных урла)
...
Рейтинг: 0 / 0
10.12.2014, 10:46
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829896
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
redwhite90в этом примере используется один и тот же урл для большой и маленькой картинкиНет, два разных.
...
Рейтинг: 0 / 0
10.12.2014, 10:49
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829897
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
miksoftredwhite90в этом примере используется один и тот же урл для большой и маленькой картинкиНет, два разных.

Вы правы, разобрался - спасибо
...
Рейтинг: 0 / 0
10.12.2014, 10:49
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829962
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
miksoft,

написал так:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="<c:url value ='/resources/js/jquery-1.8.2.min.js'/>"></script>
<script type="text/javascript"
        src="<c:url value='/resources/js/underscore.js'/>"></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="<c:url value ='/resources/js/jquery.mousewheel.js'/>"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="<c:url value ='/resources/js/popup.js'/>"></script>
<script type="text/javascript" src="<c:url value ='/resources/js/jquery.jscrollpane.min.js'/>"></script>
<script type="text/javascript" src="<c:url value ='/resources/js/scroll-startstop.events.jquery.js'/>"></script>
<script src="<c:url value ='/resources/js/jquery.ikSelect.js'/>" type="text/javascript"></script>
<script type="text/javascript" src="<c:url value ='/resources/js/jquery-ui-1.10.0.custom.min.js'/>"></script>
<!--uniform-->
<script src="<c:url value ='/resources/js/jquery.uniform.js'/>" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">

</script>
<!--end uniform-->




<script type="text/javascript" src="<c:url value ='/resources/js/script-ini.js'/>"></script>
<script type="text/javascript" src="<c:url value ='/resources/js/addImage.js'/>"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="<c:url value ='/resources/js/source/jquery.fancybox.js?v=2.1.5'/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value ='/resources/js/source/jquery.fancybox.css?v=2.1.5'/>" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="<c:url value ='/resources/js/source/helpers/jquery.fancybox-buttons.css?v=1.0.5'/>" />
<script type="text/javascript" src="<c:url value ='/resources/js/source/helpers/jquery.fancybox-buttons.js?v=1.0.5'/>"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="<c:url value ='/resources/js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7'/>" />
<script type="text/javascript" src="<c:url value ='/resources/js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7'/>"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="<c:url value ='/resources/js/source/helpers/jquery.fancybox-media.js?v=1.0.6'/>"></script>



Код: javascript
1.
2.
3.
4.
5.
6.
7.
$(".image").fancybox({
    helpers: {
        title : {
            type : 'float'
        }
    }
});



Код: javascript
1.
2.
3.
<a href="/member/path/getOriginalImage/1" title="" class="image">
     <img src="/member/path/getSmallThumbnail/1" alt="">
</a>



в итоге на строчке
Код: javascript
1.
$(".image").fancybox({

получаю ошибку авторundefined is not a function
...
Рейтинг: 0 / 0
10.12.2014, 11:29
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38829982
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
redwhite90в итоге на строчке
Код: javascript
1.
$(".image").fancybox({


получаю ошибку авторundefined is not a functionА в какой момент вызывается эта строчка?
Наверное, не зря в примерах это находится в $(document).ready(function() {
...
Рейтинг: 0 / 0
10.12.2014, 11:45
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38830087
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
miksoftredwhite90в итоге на строчке
Код: javascript
1.
$(".image").fancybox({


получаю ошибку пропущено...
А в какой момент вызывается эта строчка?
Наверное, не зря в примерах это находится в $(document).ready(function() {

вечером проверю. спасибо, что помогаете.
...
Рейтинг: 0 / 0
10.12.2014, 13:04
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38830191
ivanra
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ivanra
Гость
Если интересует решение для jsf (richfaces) + jquery ui dialog (можно взять диалог и из RF):
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
	<script type="text/javascript">
var imageDialog: function(elm) {
	var $imgdlg = $j(#{rich:element("imgdlg")});
	var imgSrc = elm.src;
	var i = imgSrc.indexOf("maxDim");
	if (i!=-1) imgSrc = imgSrc.substring(0,i-1);
	$imgdlg.html('<img src="'+imgSrc+'" style="max-height:1024px;max-width:1280px;"/>');
	$imgdlg.dialog({
		autoOpen: false,    
		width: 'auto',
		modal: true,
		close: function() {$j(this).dialog('destroy');}
	});
	setTimeout(function(){$imgdlg.dialog('open')}, 300);
};
	</script>
	<t:div id="imgdlg" styleClass="ui-helper-hidden"/>

<!-- И где-то на форме уменьшенные изображения, на которые можно кликать -->
	<t:dataList value="#{someBean.images}" var="image" >
		<h:column>
			<a4j:outputPanel styleClass="fpanel" layout="block">
				<t:div styleClass="pheader">
					<h:outputText value="#{image.fileName}"/>
				</t:div>
				<h:graphicImage value="/imgfile?id=#{image}&amp;maxDim=160"
					styleClass="fimage" onclick="imageDialog(this)" />
			</a4j:outputPanel>
		</h:column>
	</t:dataList>


Для получения изображения используется один и тот же сервлет /imgfile, формат примерно такой:
Код: sql
1.
/imgfile?id=XXXXX&maxDim=YYY

с параметрами:
id - идентифификатор изображеня
maxDim - задает максимальное разрешение по ширине/высоте, если не указан, то изображение выводится как есть, если указан - пропорционально уменьшает.
Скрипт просто отрезает всё начиная со слова maxDim и помещает в элемент img внутри div-а, дальше этот div отображается как модальная панель. Таким образом в диалоге отображается оригинальное изображение
...
Рейтинг: 0 / 0
10.12.2014, 14:12
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38830195
ivanra
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ivanra
Гость
в скрипте первая строчка с ошибкой, должно быть
Код: javascript
1.
var imageDialog = function(elm) {
...
Рейтинг: 0 / 0
10.12.2014, 14:14
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38830780
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
miksoftredwhite90в итоге на строчке
Код: javascript
1.
$(".image").fancybox({


получаю ошибку пропущено...
А в какой момент вызывается эта строчка?
Наверное, не зря в примерах это находится в $(document).ready(function() {

Да, верно, но теперь когда я кликая на картинку - она просто грузится в новой табе - никакого тебе фэнси бокса
...
Рейтинг: 0 / 0
10.12.2014, 23:48
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38830797
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
redwhite90,

У вас очень много всего накручено. Попробуйте реализовать простой пример на отдельной странице, без подключения всего остального. Потом постепенно усложняйте.
...
Рейтинг: 0 / 0
11.12.2014, 00:24
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38830816
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
Охренеть просто.

Это из-за того, что у урла нет расширения. Если добавить, то всё нормально работает - бред
...
Рейтинг: 0 / 0
11.12.2014, 01:25
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38830817
miksoft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
miksoft
Участник
redwhite90Охренеть просто.

Это из-за того, что у урла нет расширения. Если добавить, то всё нормально работает - бредТак у исходного файла оно есть?
Какой MIME-тип в заголовках отдает веб-сервер для файла, у которого нет расширения имени?
...
Рейтинг: 0 / 0
11.12.2014, 01:29
| Ответить | Цитировать | Написать  
Как реализовать загрузку большого изображения по клику на превью (thumbnail)
    #38830993
redwhite90
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
redwhite90
Гость
miksoftredwhite90Охренеть просто.

Это из-за того, что у урла нет расширения. Если добавить, то всё нормально работает - бредТак у исходного файла оно есть?
Какой MIME-тип в заголовках отдает веб-сервер для файла, у которого нет расширения имени?

image_jpg

вот тут детали

http://stackoverflow.com/questions/17554068/fancybox-links-dont-show-in-lightbox-what-am-i-missing
...
Рейтинг: 0 / 0
11.12.2014, 10:18
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как реализовать загрузку большого изображения по клику на превью (thumbnail)
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38829896&tid=1446450]:
 0ms
get settings:
 7ms
get forum list:
 15ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 186ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 50ms
get tp. blocked users:
 1ms
others: 216ms
total:  488ms
созд. / загр.: 488ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]