Jump to content
  • 0

Необходимо вставить в скрипт увеличения картинки, в скрипт просмотра панорамы 360


Ron2
 Share

Question

Здравствуйте.
У меня такой специфический вопрос, на моем сайте имеется скрипт для увеличения картинки при наведении на нее курсора мыши. Но я планирую на место обычных фото в jpg формате, вставлять иногда и фото сферических панорам в том же jpg формате. Но при этом желательно что бы два скрипта работали вместе, а т.е. поясню, при наведении мыши на картинку требуется что бы происходило ее увеличение в экране браузера, а так же при этом на увеличенной картинке при нажатии левой кнопкой мыши необходимо, что бы была бы возможность двигая ею по полю данной панорамной картинки вызывать ее вращение на 360° относительно ее окна. У меня есть простой "панорамный" скрипт, но он позволяет двигать картинку только в горизонтальной плоскости, а мне необходимо, что бы вращение происходило и в вертикальной одновременно тоже.

Вот скрипт увеличения картинки.

<div class="panorama"><img src="1.jpg" class="catalog_view watermark"></div><style>
a.test .panorama img{width:300px;height:169px;}
a.test:hover .panorama{width:300px;height:169px;overflow:visible;visibility:hidden;}
a.test:hover .panorama img{visibility:visible;width:600px;height:400px;position:absolute;z-index:150;}
</style>

Если кто сможет толково "припаять" к нему "панорамный 360°" то я буду безмерно благодарен!

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Доброго дня всем!
В общем после долгих стараний, мне все таки удалось совместить панорамный вьюер с скриптом увеличения картинки на странице сайта, при наведении на нее курсора мыши. 
Только вот возникла следующая проблема с отображением картинки на экране, а т.е. теперь при наведении курсора, панорамный вьюер и скрипт увеличения картинки, обеспечивают одновременно панорамный просмотр и увеличение ее размера внутри маленького "окна" с уходом части изображения в невидимую зону (т.е.в изначальном поле картинки с размером 300х169px) а мне нужно что бы это поле расширялось на странице до 600х400px. И желательно класс картинки class="panorama" поменять на class="catalog_view watermark", т.к. у меня на этот класс завязан на водный знак для каждого фото.

<link href="jquery.panorama.css" rel="stylesheet" />
<script src="jquery-1.4.2.min.js"></script>
<script src="jquery.panorama.js"></script>
<a class="test" href="javascript:">
<div class="sdf"><img src="1.jpg" class="panorama"></div><style>
a.test .sdf img{width:300px;height:169px;}
a.test:hover .sdf{width:300px;height:169px;overflow:visible;visibility:hidden;}
a.test:hover .sdf img{visibility:visible;width:600px;height:400px;position:absolute;z-index:150;}
</style>

Вот здесь расположены исходники и полное описание простого панарамного вьюера: http://xiper.net/collect/web-without-fl … y-panorama 
А вот пример конкретно этого кода этого скрипта увеличения картинки, который прописан у меня на временном сайте: 
http://trud.kish-host.ru/1/index.htm

Так же автор вьюера указывает, что можно включить дополнительно и вертикальный просмотр "-нет возможности обзора вверх-вниз (эти возможности несложно добавить, если тебе хотя бы немного знаком Javascript и jQuery)". А я вот очень плохо с ними знаком, что бы добавить в эти скрипты полноценный 3D просмотр сферических панорам. 
Вот поэтому помогите пожалуйста доработать эту систему до ума. Т.к. остался последний штрих к полноценному ее функционированию, а я больше дизайнер, чем программист. Буду очень признателен.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy