Forums

orangeboy

Hi there.... Still having issues with this. I know it is possible to disable this effect by altering the code in this Script.js file, but I´m really not sure exactly what to alter. The effect uses the Raphael vector library, but that also controls the nice category slider effect- so I don´t want to completely remove it.

The pages concerned are http://www.dejavumarbellavintage.com/new-arrivals/ and http://www.dejavumarbellavintage.com/deja-vu-gallery/

I simply want to remove this slash transformation, but keep all the other effects that this library provides.

If someone could help me with this, I´d be very greatful!!! I can handle changing the CSS backgrounds, but I´m really not sure what to change in this Script.JS file below.

_Would really appreciate some help from you Javascript experts. Thankyou.

orangeboy

/* Swap featured image by vector objects os slashed shape */

$(document).ready(function() {

// Swap featured images with vector objects
$(".img-holder").each(function () {
  //$(this).removeClass('ro');
  var img = $(this).find("img");
  var img_w = img.attr("width");
  var img_h = img.attr("height");
  var img_h_m = img_h - 30;
  var img_src = img.attr("src");
  img.css('display' , 'none');

  var paper = Raphael(this, img_w, img_h);
  // iOS devices can not apply path background image correctly. We are using clipping instead.
  if ($.browser.safari){
    var p = "M0,30L"+img_w+",0L"+img_w+","+img_h_m+"L0,"+img_h+"L0,30";
    var p_img = paper.image(img_src, 0, 0, img_w, img_h);
    p_img.attr({
      stroke: "none",
      "clip-rect": p
    });
  }
  else{
    var c = paper.path("M 0 30   L "+img_w+" 0   L "+img_w+" "+img_h_m+"   L 0 "+img_h+"   L 0 30");
    c.attr({
      stroke: "none",
      fill: "url("+img_src+")"
    });
  }
});

// Swap HomePage thumbnails with vector objects
$(".slide-h").each(function () {
  var img_w = $(this).find("img").attr("width");
  var img_h = $(this).find("img").attr("height");
  var img_h_m = img_h - 15;
  var img_src = $(this).find("img").attr("src");

  var paper = Raphael(this, img_w, img_h);

  if ($.browser.safari){
    var p = "M0,15L"+img_w+",0L"+img_w+","+img_h_m+"L0,"+img_h+"L0,15";
    var img = paper.image(img_src, 0, 0, img_w, img_h);
    img.attr({
      stroke: "none",
      "clip-rect": p
    });
  }
  else{
    var c = paper.path("M 0 15   L "+img_w+" 0   L "+img_w+" "+img_h_m+"   L 0 "+img_h+"   L 0 15");
    c.attr({
      stroke: "none",
      fill: "url("+img_src+")"
    });
  }
});

});

/************************************************************************************************************************************************/

/* Hover holder for svg-objects */ $(function() { $('#multicol:not(.portfolio_massonry) .img-holder, #multicol-gal .img-holder').append('

').each(function () { var $span = $('> div.i-am-overlay:not(.highslide-maincontent)', this); if ($.browser.msie && $.browser.version < 9) $span.hide(); else $span.css('opacity', 0); $(this).hover(function () { if ($.browser.msie && $.browser.version < 9) $span.show(); else $span.stop().fadeTo(500, 1); }, function () { if ($.browser.msie && $.browser.version < 9) $span.hide(); else $span.stop().fadeTo(300, 0); }); }); });

/****************************************************************************************************************/ /* Hoovers for svg-objects */ $(function() { // Add rollovers to gallery-posts thumbnails var slideshow_group_counter = 100; $("#multicol:not(.portfolio_massonry) .img-holder:not(.n-s) div.i-am-overlay").append('').each(function () { $('a.detal', this).attr('href', $(this).parent('div').find('a').attr('href'));

  elems = $(this).parents(".article").find(".gal_in_posts a");

  var group = 'group'+slideshow_group_counter;
  var tid = 'for_'+group;
  elems.eq(0).attr("id", tid);
  slideshow_group_counter++;

  var slideshow_options_bak = {};
  $.extend(slideshow_options_bak, gallery_slideshow);
  gallery_slideshow.slideshowGroup = group;
  hs.addSlideshow(slideshow_options_bak);

  $('a.zoom-gal', this).attr('href', 'javascript:;').attr('onclick', 'document.getElementById(\''+tid+'\').onclick()');

  elems.each(function () {
    $(this).addClass("hs_attached");
    if (!$(this).attr("href"))
      return;
    this.onclick = function () {
      gallery_group.slideshowGroup = group;
      gallery_group.thumbnailId = tid;
      return hs.expand(this, gallery_group);
    };
  });

  var item_info = $(this).parents(".article").find(".photo-info");
  item_info.css('display','none');

  var info_box = $(this).find("a.detal");
  info_box.hover(function() {
    item_info.stop().fadeTo(400,1);
  }, function() {
    item_info.stop().fadeTo(200,0, function() { item_info.hide() });
  });

  var img_w = $(this).parent("div").width();
  var img_h = $(this).parent("div").height() + 2;
  var img_h_m = img_h - 30;

  var paper = Raphael(this, img_w, img_h);

  if ($.browser.safari){
    var p = "M0,30L"+img_w+",0L"+img_w+","+img_h_m+"L0,"+img_h+"L0,30";
    var p_img = paper.image(gal_h, 0, 0, img_w, img_h);
    p_img.attr({
      stroke: "none",
      "clip-rect": p
    });
  }
  else{
    var c = paper.path("M 0 30   L "+img_w+" 0   L "+img_w+" "+img_h_m+"   L 0 "+img_h+"   L 0 30");
    c.attr({
      stroke: "none",
      fill: "url("+gal_h+")"
    });
  }
});

// Add rollovers to regular-posts thumbnails 
$("#multicol:not(.portfolio_massonry) .img-holder.n-s div.i-am-overlay").append('<a class="zoom" onclick="return hs.expand(this)"></a><a class="detal"></a>').each(function () {
  $('a.detal', this).attr('href', $(this).parent('div').find('a').attr('href')); 
  $('a.zoom', this).attr('href', $(this).parent('div').find('a').attr('data-img'));

  var img_w = $(this).parent("div").width()+18;
  if ($.browser.msie)
    var img_h = $(this).parent("div").height();
  else
    var img_h = $(this).parent("div").height()+2;
  var img_h_m = img_h - 30;
  var paper = Raphael(this, img_w, img_h);

  if ($.browser.safari){
    var p = "M0,30L"+img_w+",0L"+img_w+","+img_h_m+"L0,"+img_h+"L0,30";
    var p_img = paper.image(gal_h, 0, 0, img_w, img_h);
    p_img.attr({
      stroke: "none",
      "clip-rect": p
    });
  }
  else{
    var c = paper.path("M 0 30   L "+img_w+" 0   L "+img_w+" "+img_h_m+"   L 0 "+img_h+"   L 0 30");
    c.attr({
      stroke: "none",
      fill: "url("+gal_h+")"
    });
  }
});

$("#multicol-gal.two_level_gal .img-holder div.i-am-overlay").append('<a href="#" class="zoom-gal"></a><a class="detal"></a>').each(function () {

  var item_info = $(this).parents(".article").find(".photo-info");
  item_info.css('display','none');

  var info_box = $(this).find("a.detal");
  info_box.hover(function() {
    item_info.stop().fadeTo(400,1);
  }, function() {
    item_info.stop().fadeTo(200,0, function() { item_info.hide() });
  });

  var img_w = $(this).parent("div").width();
  var img_h = $(this).parent("div").height() + 2;
  var img_h_m = img_h - 30;

  var paper = Raphael(this, img_w, img_h);

  if ($.browser.safari){
    var p = "M0,30L"+img_w+",0L"+img_w+","+img_h_m+"L0,"+img_h+"L0,30";
    var p_img = paper.image(gal_h, 0, 0, img_w, img_h);
    p_img.attr({
      stroke: "none",
      "clip-rect": p
    });
  }
  else{
    var c = paper.path("M 0 30   L "+img_w+" 0   L "+img_w+" "+img_h_m+"   L 0 "+img_h+"   L 0 30");
    c.attr({
      stroke: "none",
      fill: "url("+gal_h+")"
    });
  }
});

orangeboy

$("#multicol-gal.one_level_gal .img-holder div.i-am-overlay").append('<span href="#" class="zoom-gal"></span>').each(function () {

  var img_w = $(this).parent("div").width();
  var img_h = $(this).parent("div").height() + 2;
  var img_h_m = img_h - 30;

  var paper = Raphael(this, img_w, img_h);

  if ($.browser.safari){
    var p = "M0,30L"+img_w+",0L"+img_w+","+img_h_m+"L0,"+img_h+"L0,30";
    var p_img = paper.image(gal_h, 0, 0, img_w, img_h);
    p_img.attr({
      stroke: "none",
      "clip-rect": p
    });
  }
  else{
    var c = paper.path("M 0 30   L "+img_w+" 0   L "+img_w+" "+img_h_m+"   L 0 "+img_h+"   L 0 30");
    c.attr({
      stroke: "none",
      fill: "url("+gal_h+")"
    });
  }
});

});

/*****************************************************************************************************************************************************/ //hover effect $(function() { $('.fadeThis, a.alignleft:not(.not), a.alignright, a.aligncenter, a.alignnone, .button-h, .gall_std li a').append('').each(function () { var $span = $('> span.hover', this); if ($.browser.msie && $.browser.version < 9) $span.hide(); else $span.css('opacity', 0); $(this).hover(function () { if ($.browser.msie && $.browser.version < 9) $span.show(); else $span.stop().fadeTo(500, 1); }, function () { if ($.browser.msie && $.browser.version < 9) $span.hide(); else $span.stop().fadeTo(500, 0); }); }); $('.gall_std li a').each(function(){ var im = $(this).find('img'); var im_h = im.height(); var im_w = im.width(); $('span.hover', this).css({ height:im_h, width:im_w }) }) });

/******************************************************************************************************************************/ /* Service tooltips: tags, categories, social links, etc. */ $(function() { $('.ico-l').each(function () { var $tip = $('> .info-block', this); var $span = $('> span', this); if (!$span.length) { var $span = $('> a', this); };

  var $old_html = $tip.html();
  var $new_html = '<div class="box-i-l"><div class="box-i-r"><span class="box-i">' + $tip.html() + '</span></div></div>';
  $(this).hover(function () {
    $span.addClass('act');
    $offset = $span.offset();
    $tip.html($new_html);

    if ($.browser.msie && $.browser.version < 9) {
      $tip.show();
    } else {
      $tip.css('display', 'none');
      $tip.stop().fadeTo(300, 1);}
  }, function () {
    $span.removeClass('act');
    if ($.browser.msie && $.browser.version < 9) {
      $tip.hide();
      $tip.html($old_html);
    } else {
      $tip.css('display', 'block');
      $tip.stop().fadeTo(50, 0, function() {$tip.css('display', 'none'); $tip.html($old_html);});
    }
  });
});

});

/****************************************************************************************************************/

/* New gallery */ $(function () {

 // normal hs
 $(".fadeThis").each(function () {
    if ( $(this).attr("href") == '#' )
       $(this).attr("href", $(this).find("img").attr("src") );
    this.onclick = function () {
       hs.expand(this, hs_config2);
       return false;
    };
 });

 // gallery 1 level 
 $(".one_level_gal").each(function () {
    els = $(".img-holder", this);
    els.each(function () {
       var config = {};
       $.extend(config, hs_config1);
       var im = $(this).children("img");
       var s = im.attr("src");
       //config.src = s;
       config.slideshowGroup = slideshow_options.slideshowGroup;
       var mini = $(this).children("a");
       if ( mini.length )
       {
          //config.src = mini.attr("href");
       }
       else
       {
          mini = $("<a />");
          mini.attr("href", s);
          mini.appendTo( $(this) );
       }

       mini.append( im.clone() );

       mini[0].onclick = function () {      
          return hs.expand(this, config);
       };

       $(this).click(function () {
          mini.trigger("onclick");
          return false;
       });
    });
 });

});

/*************************************************************************************************************************************************/ $(document).ready(function(){ Cufon.CSS.ready(function() { var right_s = $('.static #pg_desc2 div, .video #pg_desc2 div').width() - $('.static #pg_desc1 div, .video #pg_desc1 div').width() + 20; var b = 70 + $('.static #pg_desc2 div, .video #pg_desc2 div').height();

  $('.static #pg_desc1 div').css( {'right' : right_s , 'bottom' : b} );
  $('.static #pg_desc2 div').css( {'right' : 20, 'bottom' : 60 } );

  $('.video #pg_desc1 div').css( {'right' : right_s , 'bottom' : b} );
  $('.video #pg_desc2 div').css( {'right' : 20 , 'bottom' : 60} );
});

});

/****************************************************************************************************************/

//jQuery.noConflict(); jQuery(document).ready(function($){

/* Quick Isotope for Gallery */
function do_isotope(iContainer, iItem, iWidth) {
  var $iContainer = $(iContainer);
  if (!iContainer.length)
    return;
  var resizeTimeout = false;
  $(window).resize(function(){

    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function() {
      Cufon.CSS.ready(function() {
        if ($(window).width() < 1024) {
          $iContainer.isotope({
            containerClass : 'isotoped',
            itemSelector : iItem,
            transformsEnabled: false,
            animationEngine: 'css',
            masonry : {
              columnWidth : iWidth
            }
          });
        }
        else{
          $iContainer.isotope({
            containerClass : 'isotoped',
            itemSelector : iItem,
            transformsEnabled: false,
            animationEngine: 'jquery',
            masonry : {
              columnWidth : iWidth
            },
            animationOptions: {
              duration: 750,
              easing: 'linear',
              queue: false
            }
          });
        }
      });
    },200)
  }).trigger('resize')
}
/*--------------------------------------------------*/

/*  Slasher for Gallery  */
function do_slash(iItem) {
  // Swap featured images with vector objects
  $(iItem).each(function () {
    var img = $(this).find("img");
    var img_w = img.attr("width");
    var img_h = img.attr("height");
    var img_h_m = img_h - 30;
    var img_src = img.attr("src");

    $(this).css('height',img_h);
    $(this).css('widtht',img_w);
    img.css('display' , 'none');

    var paper = Raphael(this, img_w, img_h);
    // iOS devices can not apply path background image correctly. We are using clipping instead.
    if ($.browser.safari){
      var p = "M0,30L"+img_w+",0L"+img_w+","+img_h_m+"L0,"+img_h+"L0,30";
      var p_img = paper.image(img_src, 0, 0, img_w, img_h);
      p_img.attr({
        stroke: "none",
        "clip-rect": p
      });
    }
    else{
      var c = paper.path("M 0 30   L "+img_w+" 0   L "+img_w+" "+img_h_m+"   L 0 "+img_h+"   L 0 30");
      c.attr({
        stroke: "none",
        fill: "url("+img_src+")"
      });
    }
  });
}

ToxicFire

=/ attempting to debug this issue, it just hangs on loading so hard to test in browser, advice is find there do_slash is called and try commenting it out see if that does it.

treehouse : what would you like to learn today?

Forums

How to disable the ´slash´ SVG image transformation effect in Script.JS Code...