Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to disable the ´slash´ SVG image transformation effect in Script.JS Code…

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41023
    orangeboy
    Member

    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.

    #115668
    orangeboy
    Member

    /* 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(‘‘).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(‘‘).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+”)”
    });
    }
    });

    #115671
    orangeboy
    Member

    $(“#multicol-gal.one_level_gal .img-holder div.i-am-overlay”).append(‘‘).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 = ‘

    ‘ + $tip.html() + ‘

    ‘;
    $(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 = $(““);
    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+”)”
    });
    }
    });
    }

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.