Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите разобраться со скриптом jQuery (https://javascript.ru/forum/jquery/22102-pomogite-razobratsya-so-skriptom-jquery.html)

emere 06.10.2011 14:43

Помогите разобраться со скриптом jQuery
 
Есть скрипт с эффектом лупы на картинке http://redeyeoperations.com/plugins/zoomy/ он активируется в хедэре строкой:
<script type="text/javascript" src="js/zoomy.min.js"></script> и скриптом
$(function(){
$('.zoom').zoomy();
})(jQuery)

на странице также работает скрипт jQuery, который делает вкладки, в каждой вкладке картинка, при нажатии на которую должен срабатывать эффект лупы. Но почему-то эффект срабатывает только на картинку в первой вкладке. Понятно, что надо как-то инициировать скрипт на каждый блок. Но как это сделать не пойму.

ksa 06.10.2011 15:36

emere, твоей информации мало для дачи совета...

emere 06.10.2011 16:58

Вот тут можно посмотреть http://bowlingmarket.ru/category/back-end-assy/ на странице две вкладки XL-XLi и 82-70, на вкладке XL-XLi работает на второй нет.

ksa 06.10.2011 19:15

Цитата:

Сообщение от emere
Вот тут можно посмотреть http://bowlingmarket.ru/category/back-end-assy/

Я жду от тебя работающий тестовый пример тут... По ссылка не хожу...

emere 06.10.2011 20:06

Вот такой пример:
<div class="section">
<ul class="tabs">
<li class="current">XL-XLi</li>
<li>82-70</li>
</ul>
<div class="box visible">
<p><a href="http://img1.jpg" class="zoom"> <img src="http://img1_thumb.jpg" /> </a></p>
</div>
<div class="box">
<p><a href="http://img2.jpg" class="zoom"> <img src="http://img2_thumb.jpg" /></a></p>
</div>
</div>

ksa 06.10.2011 21:59

Цитата:

Сообщение от emere
Вот такой пример:

И что мне с ним делать? Как посмотреть его в работе?

emere 07.10.2011 14:19

уважаемый ksa, если на местной песочнице разместить пример и выложить ссылку, будет удобно посмотреть?

emere 07.10.2011 14:24

вот ссылка на пример в песочнице beta.javascript.ru/play/2EFV8b

ksa 07.10.2011 14:48

emere, тут выкладывай тестовый пример. Чего мне куда-то ходить...

emere 07.10.2011 15:03

пример состоит из 5 файлов, выкладывать тут все? если достаточно html то вот:
<!DOCTYPE HTML>
<html>
<head>

<link rel="stylesheet" href="zoomy.css">
<link rel="stylesheet" href="tabs.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script>
<script type="text/javascript" src="zoomy.min.js"></script>
<script type="text/javascript" src="tabs.js"></script>

<script type="text/javascript">
$(function(){
$('.zoom').zoomy();
});
</script>

</head>

<body>

<div class="section">
<ul class="tabs">
<li class="current">XL-XLi</li>
<li>82-70</li>
</ul>
<div class="box visible">
<div><a href="1.jpg" class="zoom"> <img src="1.jpg" /> </a></div>
</div>
<div class="box">
<div><a href="2.jpg" class="zoom"> <img src="2.jpg" /></a></div>
</div>
</div>

</body>
</html>

ksa 07.10.2011 16:21

emere, у меня нет этих стилей

<link rel="stylesheet" href="zoomy.css">
<link rel="stylesheet" href="tabs.css">


Этих файлов
<script type="text/javascript" src="zoomy.min.js"></script>
<script type="text/javascript" src="tabs.js"></script>


Как нет и этих картинок...
<a href="1.jpg" class="zoom"> <img src="1.jpg" /> </a>
<a href="2.jpg" class="zoom"> <img src="2.jpg" /></a>

emere 07.10.2011 17:59

Вложений: 2
вот zoomy.css
Код:

* Zoomy 1.3.2 - jQuery plugin
* http://redeyeops.com/plugins/zoomy
*
* Copyright (c) 2010 Jacob Lowe (http://redeyeoperations.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
* Addition fixes and modifications done by Larry Battle ( blarry@bateru.com )
* Code has been refactored and the logic has been corrected.
*
*Cusor fix from IE by Chris Pearson ( http://www.upland.co.uk )
*
*/



.parent-zoom img{
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: ease;
    cursor:  cell;
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    border: 0;
}


.zoomy{
    position: absolute;
    visibility: hidden;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0px 5px 10px #000;
    -moz-box-shadow: 0px 5px 10px #000;
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color='#3333333', Positive='true');
    border: 0px solid #333;
    line-height: 100px;
    text-align: center;
    background-color: #fff;
    z-index: 1000;
    overflow: hidden;
    cursor: url(./img/blank.cur), move;
    -webkit-transition-property: border-width, border-color, opacity;
    -webkit-transition-duration: 500ms, 1s, 500ms;
    -webkit-transition-timing-function: ease;
    border: 3px solid #fff;
}

.zoomy span{
    display: block;
    margin: 5px auto;
    background: -moz-linear-gradient(top, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,0))); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF, endColorstr=#00ffffff);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF, endColorstr=#00ffffff);
}


.zoomy a{
    color: #333;
    text-decoration: none;
    outline: 0;
}

.inactive img{
    opacity: 0.85!important;
    filter:alpha(opacity=85)!important;
}

.zoomy #tmp{
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    top: -999999px;
    left: -999999px;
}

-------tabs.css------------------------
.section {
    width: 238px;
    background: #FFFFFF;
    margin: 0 0 30px;
}
ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 1px solid #DDD;
    background: transparent;
}
.tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
}
.tabs li:hover,
 {
    color: #d1d1d1;
    padding: 0 13px;
    background: #b5b5b5;
    border: 1px solid #8e8e8e;
}
.tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
}
.box {
    display: none;
    border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
    background: #EFEFEF;
    padding: 0 12px;
}
.box.visible {
    display: block;
}

------------zoomy.min.js---------------------------
/*
* Zoomy 1.3.3.min - jQuery plugin
* http://redeyeops.com/plugins/zoomy
*
* Copyright (c) 2010 Jacob Lowe (http://redeyeoperations.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
* Addition fixes and modifications done by Larry Battle ( blarry@bateru.com )
* Code has been refactored and the logic has been corrected.
*
*/

(function(e){var h={count:[]};e.fn.zoomy=function(g,f){var k={move:function(a,b,c){var d=b.attr("rel"),e=a.offset(),l=h[d].zoom.x,j=h[d].zoom.y,a=h[d].css.width,i=h[d].css.height,m=f.zoomSize,n=m/2,g=a/l,k=i/j,d=Math.round(n-n*g),a=a-m+d,i=i-m+d,q=j-m,m=l-m,l=c.pageX-e.left-n,j=c.pageY-e.top-n,g=Math.round((c.pageX-e.left)/g)-n,c=Math.round((c.pageY-e.top)/k)-n,c={0:[g,c,l,j],1:[0,c,-d,j],2:[0,0,-d,-d],3:[0,q,-d,i],4:[g,0,l,-d],5:[m,0,a,-d],6:[m,c,a,j],7:[m,q,a,i],8:[g,q,l,i]},e=-d<=j,n=-d>j,k=i>
j,i=i<=j,j=a>l,d=-d<=l&&e&&j&&k?0:-d>l?e&&k?1:n?2:i?3:null:n?j?4:5:a<=l?k?6:7:i?8:null;b.css({backgroundPosition:"-"+c[d][0]+"px -"+c[d][1]+"px",left:c[d][2],top:c[d][3]})},classes:function(a){var b=a.find(".zoomy").attr("rel");h[b].state===0||h[b].state===null?a.removeClass("inactive"):a.addClass("inactive")},enter:function(a,b){var c=b.attr("rel");h[c].state=1;b.css("visibility","visible");k.classes(a)},leave:function(a,b,c){var d=b.attr("rel");h[d].state=c!==null?null:0;b.css("visibility","hidden");
k.classes(a)},callback:function(a,b){var c=b.attr("rel");a!==null&&typeof a==="function"&&a(h[c])}},o={round:function(a){return!f.round?0:a===void 0?f.zoomSize/2+"px":f.zoomSize/2+"px "+f.zoomSize/2+"px 0px 0px"},glare:function(a){a.children("span").css({height:f.zoomSize/2,width:f.zoomSize-10,margin:e.browser.msie&&parseInt(e.browser.version,10)===9?0:"5px auto","border-radius":o.round(0)})},params:function(a,b){var c=a.children("img"),d={marginTop:c.css("margin-top"),marginRight:c.css("margin-right"),
marginBottom:c.css("margin-bottom"),marginLeft:c.css("margin-left")},g={"float":c.css("float")},l={display:"block",height:c.height(),width:c.width(),position:"relative"},j=b.attr("rel"),i={};if(g["float"]==="none"&&a.parent("*:first").css("text-align")==="center")d.marginRight="auto",d.marginLeft="auto";e.extend(i,d,g,l);h[j].css=i;f.glare||b.children("span").css({height:f.zoomSize-10,width:f.zoomSize-10});b.css({height:f.zoomSize,width:f.zoomSize,"border-radius":o.round()});c.css("margin","0px");
c.one("load",function(){a.css(h[j].css)}).each(function(){(this.complete||e.browser.msie&&parseInt(e.browser.version,10)===6)&&e(this).trigger("load")})}},r={image:function(a,b){var c=b.attr("rel");b.show().css({top:"-999999px",left:"-999999px"});b.find("img").attr("src")!==a&&b.find("img").attr("src",a).load(function(){var d=f.glare?"<span/>":"";h[c].zoom={x:b.find("img").width(),y:b.find("img").height()};b.append(d).css({"background-image":"url("+a+")"}).find("img").remove();o.glare(b)}).each(function(){(this.complete||
e.browser.msie&&parseInt(e.browser.version,10)===6)&&e(this).trigger("load")})},zoom:function(a,b){h[b]={state:null,index:b};h.count.push(0);var c=typeof a.attr(f.attr)==="string"&&f.attr!=="href"?a.attr(f.attr):a.attr("href"),d=null,p=f.zoomInit;(function(){var c=[],e=function(b){k.move(a,d,b)},i=function(){k.enter(a,d);a.bind("mousemove",e);k.callback(f.zoomStart,d)},m=function(b){k.leave(a,d,b);a.unbind("mousemove",e);k.callback(f.zoomStop,d)},n=function(c){f.clickable||c.preventDefault();h[b].state===
0||h[b].state===null?(i(),k.move(a,d,c)):h[b].state===1&&g!=="mouseover"&&g!=="mouseenter"&&m(0)},o=function(){h[b].state===0&&i()},p=function(){return!1};g==="mouseover"?c[g]=n:(c[g]=n,c.mouseover=o);if(!f.clickable&&g!=="click")c.click=p;c.mouseleave=function(){h[b].state===1&&m(null)};a.bind(c)})();a.addClass("parent-zoom").append('<div class="zoomy zoom-obj-'+b+'" rel="'+b+'"><img id="tmp"/></div>');d=e(".zoom-obj-"+b);p!==null&&typeof p==="function"&&p(a);o.params(a,d);r.image(c,d)},init:function(a,
b){b.one("load",function(){r.zoom(a,h.count.length)}).each(function(){(this.complete||e.browser.msie&&parseInt(e.browser.version,10)===6)&&e(this).trigger("load")})}};typeof g==="object"&&f===void 0?(f=g,g="click"):g===void 0&&(g="click");f=e.extend({zoomSize:200,round:!0,glare:!0,clickable:!1,attr:"href",zoomInit:null,zoomStart:null,zoomStop:null},f);e(this).each(function(){var a=e(this),b=a.find("img");r.init(a,b)})}})(jQuery);

-------------------tabs.js---------------------------------------
(function($) {
$(function() {

    function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }
    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
    function eraseCookie(name) {
        createCookie(name,"",-1);
    }

    $('ul.tabs').each(function(i) {
        var cookie = readCookie('tabCookie'+i);
        if (cookie) $(this).find('li').eq(cookie).addClass('current').siblings().removeClass('current')
            .parents('div.section').find('div.box').hide().eq(cookie).show();
    })

    $('ul.tabs').delegate('li:not(.current)', 'click', function() {
        $(this).addClass('current').siblings().removeClass('current')
            .parents('div.section').find('div.box').hide().eq($(this).index()).show();
        var ulIndex = $('ul.tabs').index($(this).parents('ul.tabs'));
        eraseCookie('tabCookie'+ulIndex);
        createCookie('tabCookie'+ulIndex, $(this).index(), 365);
    })

})
})(jQuery)

---------------jpg----------------------------

ksa 08.10.2011 09:26

Пошло Лего...

emere, учись делать простые тестовые примеры... Тогда может и найдутся желающие в нём поковыряться/потренироваться...
Если не умеешь - готовь деньги на оплату работы.

emere 08.10.2011 09:46

ясно, спасибо.


Часовой пояс GMT +3, время: 17:45.