Вставка Fancybox в .html

@topas07 · Регистрация: 23.12.2014

Студворк — интернет-сервис помощи студентам

Добрый день пытаюсь интэгрировать скрипт Fancybox для картинок простого .хтмл сайта. Как известно fancybox.css меняет тэг "a img", а он тем самым пересекается с основным Main.css сайта, в котором тэг н!fстроен по своему. Приведу пример:

Fancybox.css

CSS
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
html, body, div, ul {
    margin: 0;
    padding: 0;
}
 
body {
    color: #262626;
    background: #f4f4f4;
    font: normal 12px/18px Verdana, sans-serif;
}
 
#content {
    width: 400px;
    margin: 40px auto 0 auto;
    padding: 0 60px 30px 60px;
    border: solid 1px #cbcbcb;
    background: #fafafa;
    -moz-box-shadow: 0px 0px 10px #cbcbcb;
    -webkit-box-shadow: 0px 0px 10px #cbcbcb;
}
 
hr {
    border: none;
    height: 1px; line-height: 1px;
    background: #E5E5E5;
    margin-bottom: 20px;
    padding: 0;
}
 
p {
    margin: 0;
    padding: 7px 0;
}
 
a {
    outline: none;
}
 
a img {
    border: none;
    padding: 2px;
    margin: 10px 20px 10px 0;
    vertical-align: top;
}
 
a img.last {
    margin-right: 0;    
}
 
ul {
    margin-bottom: 24px;
    padding-left: 30px;
}

Main.css

CSS
1
2
3
4
5
6
7
8
9
10
11
.house a img:hover{
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80) white;
-khtml-opacity: 0.8;
}
 
 
a {color:#e16100; outline-style:none;text-decoration:underline;}
    a:hover {color:#e16100; text-decoration:none; cursor:pointer;}
        a img {border-color:#e16100}

Тем самым Простые картинки с сылками искревляются под fancybox.css. Как исправить такое явление?

@Al_lord · 22.01.2015, 20:54

как искривляются? можно скрин?
вариант: поставьте подключения main.css под Fancybox.css

@topas07 · 22.01.2015, 21:18 **[ТС]**

Первый вариант это нармальная страница без Fancybox. Второй уже вставлен сам скрипт и указан путь к fancybox.css. Выделеный рисунок направляет на index.hmtl - он с сылкой. Обратите внимание на фон второй картинки

@cevil · 22.01.2015, 22:34

открой Firebug и посмотри какие стили наследуются к картинке от fancyboxa и удали ненужное

@topas07 · 23.01.2015, 23:35 **[ТС]**

Оказывается при помощи дебуга, выяснил, что fancybox.css совсем не нужный файл, когда вставляешь скрипт в страницу сайта

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Al_lord 39 / 39 / 26 Регистрация: 11.01.2014 Сообщений: 343
	22.01.2015, 20:54
	как искривляются? можно скрин? вариант: поставьте подключения main.css под Fancybox.css 1

@topas07 0 / 0 / 0 Регистрация: 23.12.2014 Сообщений: 39
	22.01.2015, 21:18 [ТС]
	Первый вариант это нармальная страница без Fancybox. Второй уже вставлен сам скрипт и указан путь к fancybox.css. Выделеный рисунок направляет на index.hmtl - он с сылкой. Обратите внимание на фон второй картинки Миниатюры 0

@cevil 12 / 12 / 5 Регистрация: 07.04.2014 Сообщений: 174
	22.01.2015, 22:34
	Сообщение было отмечено topas07 как решение Решение открой Firebug и посмотри какие стили наследуются к картинке от fancyboxa и удали ненужное 1

@topas07 0 / 0 / 0 Регистрация: 23.12.2014 Сообщений: 39
	23.01.2015, 23:35 [ТС]
	Оказывается при помощи дебуга, выяснил, что fancybox.css совсем не нужный файл, когда вставляешь скрипт в страницу сайта 0

Вставка Fancybox в .html

Решение