Sobre jquery

[matucats]

Hola a tod@s, soy nueva en el foro.

En realidad no entiendo nada de programación, la verdad que no es lo mío, pero estoy desesperada porque el DG a quien le encargué hace varios meses una página web, no la puede terminar ni subir ya que no consigue resolver un problema con el slide de la home, que según me explicó está hecho con el jquery. El problema que tiene el slide, es que si bien funciona en otros navegadores, en algunas ocasiones no funciona el "loop" en el internet explorer 8. No empalma la última foto del SLIDE con la primera, y no sabe como resolverlo.


Algún experto en jquery que pueda ayudarnos????

Necesito la web para laburar, y realmente me urge solucionar este tema lo antes posible.

Gracias!!!!

Matu

[alexg88]

Danos algo más de información o no podremos ayudarte.

Por ejemplo, el código HTML y los scripts.

[matucats]

Alex, en cuanto pueda ubicar al diseñador, le pido esos datos y se los digo.

Por si sirve de algo, les paso el link del sitio test, en algunos casos funciona el loop en el IE8, pero en otros no. Al pasar las fotos hacia la derecha, llega un momento en que se queda todo en blanco.

Gracias, ya les aportaré más datos mañana.

http://www.lespapillons.barcodg.com.ar/les_papillons_fotografia_para_ninos.html

[matucats]

Este es el script principal del slide:

/*
* jQuery SmoothDivScroll 1.1
*
* Copyright (c) 2010 Thomas Kahn
* Licensed under the GPL license.
*
* http://www.maaki.com/thomas/SmoothDivScroll/
*
* Depends:
* jquery.ui.widget.js
*
*/
(function($){$.widget("thomaskahn.smoothDivScroll" ,{options:{scrollingHotSpotLeft:"div.scrollingHotS potLeft",scrollingHotSpotRight:"div.scrollingHotSp otRight",scrollableArea:"div.scrollableArea",scrol lWrapper:"div.scrollWrapper",hiddenOnStart:false,a jaxContentURL:"",countOnlyClass:"",scrollStep:15,s crollInterval:10,mouseDownSpeedBooster:3,autoScrol l:"",autoScrollDirection:"right",autoScrollStep:5, autoScrollInterval:10,visibleHotSpots:"",hotSpotsV isibleTime:5,startAtElementId:""},_create:function (){var self=this,o=this.options,el=this.element;el.data(" scrollWrapper",el.find(o.scrollWrapper));el.data(" scrollingHotSpotRight",el.find(o.scrollingHotSpotR ight));el.data("scrollingHotSpotLeft",el.find(o.sc rollingHotSpotLeft));el.data("scrollableArea",el.f ind(o.scrollableArea));el.data("speedBooster",1);e l.data("motherElementOffset",el.offset().left);el. data("scrollXPos",0);el.data("hotSpotWidth",el.fin d(o.scrollingHotSpotLeft).width());el.data("scroll ableAreaWidth",0);el.data("startingPosition",0);el .data("rightScrollInterval",null);el.data("leftScr ollInterval",null);el.data("autoScrollInterval",nu ll);el.data("hideHotSpotBackgroundsInterval",null) ;el.data("previousScrollLeft",0);el.data("pingPong Direction","right");el.data("getNextElementWidth", true);el.data("swapAt",null);el.data("startAtEleme ntHasNotPassed",true);el.data("swappedElement",nul l);el.data("originalElements",el.data("scrollableA rea").children(o.countOnlyClass));el.data("visible ",true);el.data("initialAjaxContentLoaded",false); el.data("enabled",true);if(o.autoScroll!=="always" ){switch(o.visibleHotSpots){case"always":self.show HotSpotBackgrounds();break;case"onstart":self.show HotSpotBackgrounds();el.data("hideHotSpotBackgroun dsInterval",setTimeout(function(){self.hideHotSpot Backgrounds("slow")},(o.hotSpotsVisibleTime*1000)) );break;default:break}}el.data("scrollingHotSpotRi ght").bind("mousemove",function(e){var x=e.pageX-(this.offsetLeft+el.data("motherElementOffset"));e l.data("scrollXPos",Math.round((x/el.data("hotSpotWidth"))*o.scrollStep));if(el.data ("scrollXPos")===Infinity){el.data("scrollXPos",0) }});el.data("scrollingHotSpotRight").bind("mouseov er",function(){if((o.autoScroll==="onstart"&&el.da ta("autoScrollInterval")!==null)){clearInterval(el .data("autoScrollInterval"));el.data("autoScrollIn terval",null);self._trigger("autoScrollIntervalSto pped")}el.data("rightScrollInterval",setInterval(f unction(){if(el.data("scrollXPos")>0&&el.data("ena bled")){el.data("scrollWrapper").scrollLeft(el.dat a("scrollWrapper").scrollLeft()+(el.data("scrollXP os")*el.data("speedBooster")));self._showHideHotSp ots()}},o.scrollInterval));self._trigger("mouseOve rRightHotSpot")});el.data("scrollingHotSpotRight") .bind("mouseout",function(){clearInterval(el.data( "rightScrollInterval"));el.data("scrollXPos",0)}); el.data("scrollingHotSpotRight").bind("mousedown", function(){el.data("speedBooster",o.mouseDownSpeed Booster)});$("body").bind("mouseup",function(){el. data("speedBooster",1)});el.data("scrollingHotSpot Left").bind("mousemove",function(e){var x=el.data("scrollingHotSpotLeft").innerWidth()-(e.pageX-el.data("motherElementOffset"));el.data("scrollXPo s",Math.round((x/el.data("hotSpotWidth"))*o.scrollStep));if(el.data ("scrollXPos")===Infinity){el.data("scrollXPos",0) }});el.data("scrollingHotSpotLeft").bind("mouseove r",function(){if((o.autoScroll==="onstart"&&el.dat a("autoScrollInterval")!==null)){clearInterval(el. data("autoScrollInterval"));el.data("autoScrollInt erval",null);self._trigger("autoScrollIntervalStop ped")}el.data("leftScrollInterval",setInterval(fun ction(){if(el.data("scrollXPos")>0&&el.data("enabl ed")){el.data("scrollWrapper").scrollLeft(el.data( "scrollWrapper").scrollLeft()-(el.data("scrollXPos")*el.data("speedBooster")));s elf._showHideHotSpots()}},o.scrollInterval));self. _trigger("mouseOverLeftHotSpot")});el.data("scroll ingHotSpotLeft").bind("mouseout",function(){clearI nterval(el.data("leftScrollInterval"));el.data("sc rollXPos",0)});el.data("scrollingHotSpotLeft").bin d("mousedown",function(){el.data("speedBooster",o. mouseDownSpeedBooster)});$(window).bind("resize",f unction(){if(!(o.hiddenOnStart)){self._showHideHot Spots()}self._trigger("windowResized")});if(o.ajax ContentURL.length>0){self.replaceContent(o.ajaxCon tentURL)}else{self.recalculateScrollableArea()}if( o.hiddenOnStart){self.hide()}if((o.autoScroll.leng th>0)&&!(o.hiddenOnStart)&&(o.ajaxContentURL.lengt h<=0)){self.startAutoScroll()}},showHotSpotBackgro unds:function(fadeSpeed){var self=this,el=this.element;if(fadeSpeed!==undefined ){el.data("scrollingHotSpotLeft").css("opacity","0 .0");el.data("scrollingHotSpotRight").css("opacity ","0.0");el.data("scrollingHotSpotLeft").addClass( "scrollingHotSpotLeftVisible");el.data("scrollingH otSpotRight").addClass("scrollingHotSpotRightVisib le");el.data("scrollingHotSpotLeft").fadeTo(fadeSp eed,0.35);el.data("scrollingHotSpotRight").fadeTo( fadeSpeed,0.35)}else{el.data("scrollingHotSpotLeft ").addClass("scrollingHotSpotLeftVisible");el.data ("scrollingHotSpotLeft").removeAttr("style");el.da ta("scrollingHotSpotRight").addClass("scrollingHot SpotRightVisible");el.data("scrollingHotSpotRight" ).removeAttr("style")}self._showHideHotSpots()},hi deHotSpotBackgrounds:function(fadeSpeed){var el=this.element;if(fadeSpeed!==undefined){el.data( "scrollingHotSpotLeft").fadeTo(fadeSpeed,0.0,funct ion(){el.data("scrollingHotSpotLeft").removeClass( "scrollingHotSpotLeftVisible")});el.data("scrollin gHotSpotRight").fadeTo(fadeSpeed,0.0,function(){el .data("scrollingHotSpotRight").removeClass("scroll ingHotSpotRightVisible")})}else{el.data("scrolling HotSpotLeft").removeClass("scrollingHotSpotLeftVis ible");el.data("scrollingHotSpotLeft").removeAttr( "style");el.data("scrollingHotSpotRight").removeCl ass("scrollingHotSpotRightVisible");el.data("scrol lingHotSpotRight").removeAttr

[matucats]

("style")}},_showHideHotSpots:function(){var self=this,el=this.element,o=this.options;if(o.auto Scroll!=="always"){if(el.data("scrollableAreaWidth ")<=(el.data("scrollWrapper").innerWidth())){el.da ta("scrollingHotSpotLeft").hide();el.data("scrolli ngHotSpotRight").hide()}else if(el.data("scrollWrapper").scrollLeft()===0){el.d ata("scrollingHotSpotLeft").hide();el.data("scroll ingHotSpotRight").show();self._trigger("scrollLeft LimitReached");clearInterval(el.data("leftScrollIn terval"));el.data("leftScrollInterval",null)}else if(el.data("scrollableAreaWidth")<=(el.data("scrol lWrapper").innerWidth()+el.data("scrollWrapper").s crollLeft())){el.data("scrollingHotSpotLeft").show ();el.data("scrollingHotSpotRight").hide();self._t rigger("scrollRightLimitReached");clearInterval(el .data("rightScrollInterval"));el.data("rightScroll Interval",null)}else{el.data("scrollingHotSpotLeft ").show();el.data("scrollingHotSpotRight").show()} }else{el.data("scrollingHotSpotLeft").hide();el.da ta("scrollingHotSpotRight").hide()}},moveToElement :function(moveTo,elementNumber){var self=this,el=this.element,o=this.options,tempScrol lableAreaWidth=0,foundStartAtElement=false;switch( moveTo){case"first":el.data("scrollXPos",0);self._ trigger("movedToFirstElement");break;case"start":e l.data("scrollableArea").children(o.countOnlyClass ).each(function(){if((o.startAtElementId.length>0) &&(($(this).attr("id"))===o.startAtElementId)){el. data("startingPosition",tempScrollableAreaWidth);f oundStartAtElement=true}tempScrollableAreaWidth=te mpScrollableAreaWidth+$(this).outerWidth(true)});e l.data("scrollXPos",el.data("startingPosition"));s elf._trigger("movedToStartElement");break;case"las t":el.data("scrollXPos",el.data("scrollableAreaWid th"));self._trigger("movedToLastElement");break;ca se"number":if(!(isNaN(elementNumber))){el.data("sc rollableArea").children(o.countOnlyClass).each(fun ction(index){if(index===(elementNumber-1)){el.data("scrollXPos",tempScrollableAreaWidth)} tempScrollableAreaWidth=tempScrollableAreaWidth+$( this).outerWidth(true)})}self._trigger("movedToEle mentNumber",null,{"elementNumber":elementNumber}); break;default:break}el.data("scrollWrapper").scrol lLeft(el.data("scrollXPos"));self._showHideHotSpot s()},addContent:function(ajaxContentURL,addWhere){ var self=this,el=this.element;$.get(ajaxContentURL,fun ction(data){if(addWhere==="first"){el.data("scroll ableArea").children(":first").before(data)}else{el .data("scrollableArea").children(":last").after(da ta)}self.recalculateScrollableArea();self._showHid eHotSpots()})},replaceContent:function(ajaxContent URL){var self=this,el=this.element;el.data("scrollableArea" ).load(ajaxContentURL,function(){self.recalculateS crollableArea();self.moveToElement("first");self._ showHideHotSpots();el.data("startingPosition",0)}) },recalculateScrollableArea:function(){var tempScrollableAreaWidth=0,foundStartAtElement=fals e,o=this.options,el=this.element,self=this;el.data ("scrollableArea").children(o.countOnlyClass).each (function(){if((o.startAtElementId.length>0)&&(($( this).attr("id"))===o.startAtElementId)){el.data(" startingPosition",tempScrollableAreaWidth);foundSt artAtElement=true}tempScrollableAreaWidth=tempScro llableAreaWidth+$(this).outerWidth(true)});if(!(fo undStartAtElement)){el.data("startAtElementId","") }el.data("scrollableAreaWidth",tempScrollableAreaW idth);el.data("scrollableArea").width(el.data("scr ollableAreaWidth"));el.data("scrollWrapper").scrol lLeft(el.data("startingPosition"));el.data("scroll XPos",el.data("startingPosition"));if(!(el.data("i nitialAjaxContentLoaded"))){if((o.autoScroll.lengt h>0)&&!(o.hiddenOnStart)&&(o.ajaxContentURL.length >0)){self.startAutoScroll();el.data("initialAjaxCo ntentLoaded",true)}}},stopAutoScroll:function(){va r self=this,el=this.element;clearInterval(el.data("a utoScrollInterval"));el.data("autoScrollInterval", null);self._showHideHotSpots();self._trigger("auto ScrollStopped")},startAutoScroll:function(){var self=this,el=this.element,o=this.options;self._sho wHideHotSpots();clearInterval(el.data("autoScrollI nterval"));el.data("autoScrollInterval",null);self ._trigger("autoScrollStarted");el.data("autoScroll Interval",setInterval(function(){if(!(el.data("vis ible"))||(el.data("scrollableAreaWidth")<=(el.data ("scrollWrapper").innerWidth()))){clearInterval(el .data("autoScrollInterval"));el.data("autoScrollIn terval",null)}else{el.data("previousScrollLeft",el .data("scrollWrapper").scrollLeft());switch(o.auto ScrollDirection){case"right":el.data("scrollWrappe r").scrollLeft(el.data("scrollWrapper").scrollLeft ()+o.autoScrollStep);if(el.data("previousScrollLef t")===el.data("scrollWrapper").scrollLeft()){self. _trigger("autoScrollRightLimitReached");clearInter val(el.data("autoScrollInterval"));el.data("autoSc rollInterval",null);self._trigger("autoScrollInter valStopped")}break;case"left":el.data("scrollWrapp er").scrollLeft(el.data("scrollWrapper").scrollLef t()-o.autoScrollStep);if(el.data("previousScrollLeft") ===el.data("scrollWrapper").scrollLeft()){self._tr igger("autoScrollLeftLimitReached");clearInterval( el.data("autoScrollInterval"));el.data("autoScroll Interval",null);self._trigger("autoScrollIntervalS topped")}break;case"backandforth":if(el.data("ping PongDirection")==="right"){el.data("scrollWrapper" ).scrollLeft(el.data("scrollWrapper").scrollLeft() +(o.autoScrollStep))}else{el.data("scrollWrapper") .scrollLeft(el.data("scrollWrapper").scrollLeft()-(o.autoScrollStep))}if(el.data("previousScrollLeft ")===el.data("scrollWrapper").scrollLeft()){if(el. data("pingPongDirection")==="right"){el.data("ping PongDirection","left");self._trigger("autoScrollRi ghtLimitReached")}else{el.data("pingPongDirection" ,"right");self._trigger("autoScrollLeftLimitReache d")}}break;case"endlessloopright":if(el.data("getN extElementWidth")){if((o.startAtElementId.length>0 )&&(el.data("startAtElementHasNotPassed"))){el.dat a("swapAt",$("#"+o.startAtElementId).outerWidth(tr ue));el.data("startAtElementHasNotPassed",false)}e lse{el.data("swapAt",el.data("scrollableArea").chi ldren(":first").outerWidth(true))}el.data("getNext ElementWidth",false)}el.data("scrollWrapper").scro llLeft(el.data("scrollWrapper").scrollLeft()+o.aut oScrollStep);if(el.data("swapAt")<=el.data("scroll Wrapper").scrollLeft()){el.data("swappedElement",e l.data("scrollableArea").children(":first").detach ());el.data("scrollableArea").append(el.data("swap pedElement"));el.data("scrollWrapper").scrollLeft( el.data("scrollWrapper").scrollLeft()-el.data("swappedElement").outerWidth(true));el.dat a("getNextElementWidth",true)}break;case"endlesslo opleft":if(el.data("getNextElementWidth")){if((o.s tartAtElementId.length>0)&&(el.data("startAtElemen tHasNotPassed"))){el.data("swapAt",$("#"+o.startAt ElementId).outerWidth(true));el.data("startAtEleme ntHasNotPassed",false)}else{el.data("swapAt",el.da ta("scrollableArea").children(":first").outerWidth (true))}el.data("getNextElementWidth",false)}el.da ta("scrollWrapper").scrollLeft(el.data("scrollWrap per").scrollLeft()-o.autoScrollStep);if(el.data("scrollWrapper").scro llLeft()===0){el.data("swappedElement",el.data("sc rollableArea").children(":last").detach());el.data ("scrollableArea").prepend(el.data("swappedElement "));el.data("scrollWrapper").scrollLeft(el.data("s crollWrapper").scrollLeft()+el.data("swappedElemen t").outerWidth(true));el.data("getNextElementWidth ",true)}break;default:break}}},o.autoScrollInterva l))},restoreOriginalElements:function(){var self=this,el=this.element;el.data("scrollableArea" ).html(el.data("originalElements"));self.recalcula teScrollableArea();self.moveToElement("first")},sh ow:function(){var el=this.element;el.data("visible",true);el.show()} ,hide:function(){var el=this.element;el.data("visible",false);el.hide() },enable:function(){var el=this.element;el.data("enabled",true)},disable:f unction(){var el=this.element;clearInterval(el.data("autoScrollI nterval"));clearInterval(el.data("rightScrollInter val"));clearInterval(el.data("leftScrollInterval") );clearInterval(el.data("hideHotSpotBackgroundsInt erval"));el.data("enabled",false)},destroy:functio n(){var el=this.element;clearInterval(el.data("autoScrollI nterval"));clearInterval(el.data("rightScrollInter val"));clearInterval(el.data("leftScrollInterval") );clearInterval(el.data("hideHotSpotBackgroundsInt erval"));el.data("scrollingHotSpotRight").unbind(" mouseover");el.data("scrollingHotSpotRight").unbin d("mouseout");el.data("scrollingHotSpotRight").unb ind("mousedown");el.data("scrollingHotSpotLeft").u nbind("mouseover");el.data("scrollingHotSpotLeft") .unbind("mouseout");el.data("scrollingHotSpotLeft" ).unbind("mousedown");el.data("scrollableArea").ht ml(el.data("originalElements"));el.data("scrollabl eArea").removeAttr("style");el.data("scrollingHotS potRight").removeAttr("style");el.data("scrollingH otSpotLeft").removeAttr("style");el.data("scrollWr apper").scrollLeft(0);el.data("scrollingHotSpotLef t").removeClass("scrollingHotSpotLeftVisible");el. data("scrollingHotSpotRight").removeClass("scrolli ngHotSpotRightVisible");el.data("scrollingHotSpotR ight").hide();el.data("scrollingHotSpotLeft").hide ();$.Widget.prototype.destroy.apply(this,arguments )}})})(jQuery);

[matucats]

el Css

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 50%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(images/big_transparent_.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(../../images/cursors/cursor_arrow_left.cur), url(../../images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.00; /* Standard CSS3 opacity setting */
-moz-opacity: 0.00; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 00); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 50%;
height: 100%;
background-image: url(images/big_transparent_.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(../../images/cursors/cursor_arrow_right.cur), url(../../images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.00;
filter: alpha(opacity = 00);
-moz-opacity: 0.00;
zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}

div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
text-align:left;
}

[matucats]

script principal:
http://www.lespapillons.barcodg.com.ar/slideshow.php

Css:
http://www.lespapillons.barcodg.com.ar/smoothDivScroll.css

El código desde donde ejecutan todo:
http://www.lespapillons.barcodg.com.ar/slideshow.php

[alexg88]

Me parece que vas a tenerlo complicado. Por lo que he visto el plugin que utilizas no funciona ni siquiera con IE9 (y se supone que ha mejorado). Al ser un plugin a no ser que lo corrijas tú lo veo dificil.

Tendrás que buscarte otro plugin que funcione o buscar otra manera de presentar las fotos

[matucats]

Yo no tengo ni idea, al parecer el programador que trabaja con mi diseñador, no sabe como corregirlo para que funcione en todos los IE 8, lo loco es que en un par de maquinas que tienen instalado ese navegador funciona, pero en otras no.

Gracias Alex!