jquery - Custom data-* types, css and javascript -


all. building full screen jquery gallery project working on, , running in small hiccup.

to see demo of happening, please visit http://www.idealbrandon.com/gallery.html.

basically, loading bg-image each slide using custom attribute, data-background. works fine first time through, whenever slide loaded second time, not load. html slide is:

<div class="slide" data-background="/img/gallery/2.jpg">     <div class="location">magical aqua ducks</div>     <div class="verse"></div> </div>

the javascript in question is

for(var = 0; < totalslides; i++){     $pagerlist     .append('<li class="page" data-target="'+i+'"></li>');         if ($slides.eq(i).attr("data-background") != null){             $slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");     }; };

and entire javascript file is

(function($){ function prefix(el){     var prefixes = ["webkit", "moz", "o", "ms"];     (var = 0; < prefixes.length; i++){         if (prefixes[i] + "transition" in el.style){             return '-'+prefixes[i].tolowercase()+'-';          };     };      return "transition" in el.style ? "" : false; }; var methods = {     init: function(settings){         return this.each(function(){             var config = {                 slidedur: 7000,                 fadedur: 800             };             if(settings){                 $.extend(config, settings);             };             this.config = config;             var $container = $(this),                 slideselector = '.slide',                 fading = false,                 slidetimer,                 activeslide,                 newslide,                 $slides = $container.find(slideselector),                 totalslides = $slides.length,                 $pagerlist = $container.find('.pager_list');                 prefix = prefix($container[0]);              function animateslides(activendx, newndx){                 function cleanup(){                     $slides.eq(activendx).removeattr('style');                     activeslide = newndx;                     fading = false;                     waitfornext();                 };                                      if(fading || activendx == newndx){                     return false;                 };                 fading = true;                 $pagers.removeclass('active').eq(newslide).addclass('active');                 $slides.eq(activendx).css('z-index', 3);                 $slides.eq(newndx).css({                     'z-index': 2,                     'opacity': 1                 });                 if(!prefix){                     $slides.eq(activendx).animate({'opacity': 0}, config.fadedur,                     function(){                         cleanup();                     });                 } else {                     var styles = {};                     styles[prefix+'transition'] = 'opacity '+config.fadedur+'ms';                     styles['opacity'] = 0;                     $slides.eq(activendx).css(styles);                     //$slides.eq(activendx).css("background-image", "url("+$slides.eq(activendx).attr("data-background")+")");                      var fadetimer = settimeout(function(){                         cleanup();                     },config.fadedur);                 };             };             function changeslides(target){                 if(target == 'next'){                     newslide = (activeslide * 1) + 1;                     if(newslide > totalslides - 1){                         newslide = 0;                     }                 } else if(target == 'prev'){                     newslide = activeslide - 1;                     if(newslide < 0){                         newslide = totalslides - 1;                     };                 } else {                     newslide = target;                 };                 animateslides(activeslide, newslide);             };             function waitfornext(){                 slidetimer = settimeout(function(){                     changeslides('next');                 },config.slidedur);             };             for(var = 0; < totalslides; i++){                 $pagerlist                     .append('<li class="page" data-target="'+i+'"></li>');                 if ($slides.eq(i).attr("data-background") != null){                     $slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");                     //alert($slides.eq(i).attr("data-background"));                 };             };             $container.find('.page').bind('click',function(){                 var target = $(this).attr('data-target');                 cleartimeout(slidetimer);                 changeslides(target);             });             var $pagers = $pagerlist.find('.page');             $slides.eq(0).css('opacity', 1);                $pagers.eq(0).addclass('active');             activeslide = 0;              waitfornext();         });     } }; $.fn.easyfader = function(settings){       return methods.init.apply(this, arguments); }; })(jquery);

thanks in advance

having had @ gallery.js file have following function called on fade transition: cleanup()

in function remove style attribute $slides:

$slides.eq(activendx).removeattr('style');

which removing background-image style too. never set again.

after above line remove styles may want include:

$slides.eq(activendx).css("background-image", "url("+$slides.eq(activendx).data("background")+")");

Comments

Post a Comment

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

i seeing strange behavior cryptstringtobinary cryptography api. please see below code (config: x64 debug): #include "stdafx.h" #include <windows.h> #include <strsafe.h> #include <iostream> #include <exception> void main() { dword dwskip; dword dwflags; dword dwdatalen; //lpcwstr pszinput = l"jaaaaaecaaadzgaaakqaagdnnl1l56bwgfjdgr3rpxtqqqn6daw3usv2emkjym4t"; //this works fine lpcwstr pszinput = l"mytest"; //doesnt work, api returns false,error code 0x0000000d // determine size of byte array , allocate memory. if(! cryptstringtobinary( pszinput, _tcslen( pszinput ) + 1, crypt_string_base64, null, &dwdatalen, &dwskip, &dwflags ) ) { dword dw = getlasterror(); //0x0000000d: data invalid throw std::exception( "error computing byte length." ); } byte *pbytebyte = null; try { ...
Read more

c++ - Correct method for redrawing a layered window -

i have window created ws_ex_layered window style. drawing onto memory bitmap using gdi+, , using updatelayeredwindow update graphical content of layered window. intend use window main window of application, require redraw frequently. seeing layered windows not receive wm_paint windows message [?] , need come appropriate method re-drawing window. optimisation not essential , it's nice have cake , eat too. therefore, in search of "correct" method use. here thoughts far: i guess it's idea render onto off-screen bitmap before bitblt ing or similar. 60 frames rendered per second should (more than?) enough (but how compare other applications' frame rates?). possible solutions: use settimer send wm_timer message on regular basis. useful because through specifying time-out value, can achieve desired frames per second, without requirement measure duration "frame" takes rendered. would cause input or other lags due frequency , speed of m...
Read more

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more