javascript - Show a different gallery depending on which button is clicked -

-

i have gallery here nation select buttons opens 1 background image in div ".displayarea", picking pics array "arrayindex". , "next"/"previous" select buttons, open separate gallery, in div ".containsnext", placed above displayarea div. close button closes both these divs. working far. want display different gallery different arrays(or can same, don't know more efficient)within .containsnext div, based on nation button clicked. say, button "croatia", pic photos array on line 3 displayed, button spain, array, arrayspain(line 9) displayed. know supposed post code of have tried, did not come useful. background pic in displayarea, have done following

function addimageinto(arrayindex, container) { var displayarea = document.queryselector('.displayarea'); if (displayarea.queryselector('.' + container.id)) {     return; } displayarea.innerhtml = '';

but cam not able achieve goal that. else working, forward() , backwards() functions, forward function nested within rather large function line 39 65. writing same code on , on every button, cannot useful way this.

link pen: http://codepen.io/damianocel/pen/gpgglb

please click nations button before click "next" or "previous" buttons. thank help

from understand, first want different array each country , second don't want re-write code every single button. every country have: button name of country background image array of images slideshow recommendation using templates. have used these http://handlebarsjs.com/ before. templates allow cut repetitive code introducing pattern, followed in many elements in code. imagine instead of having different array country name , bg-images , slideshow, can structure data this: http://codepen.io/teft74/pen/mkeqbp?editors=101 (sorry give un external site refused accept code)

this structure allowes use templates. every country have: button name of country background image array of images slideshow in templates can write like:

 {{#each country}}  // "each" makes loop each country, returning button     <button> {{name}}</button>     {{/country}}

this take each country name data , place in button , create buttons each country. when click on button takes different template populated data corresponding button. example user clicks on button name: spain(which cell in country array) populate template background image , gallery same cell.

i'm sorry can more specific, have re-write code make work templates. might seem lot of work(the idea offering) once it more scalable. make template once , if want add country add data(name, bg-image, gallery[]) , template generates whole html, css , javascript functions you, without having write on again single time. check out handlebars , figure out(with general directions) how can apply case. luck!


Comments

Post a Comment

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

-
#include "llvm/pass.h" #include "llvm/ir/module.h" #include "llvm/ir/function.h" #include "llvm/support/raw_ostream.h" #include "llvm/ir/legacypassmanager.h" #include "llvm/ir/instrtypes.h" #include "llvm/transforms/ipo/passmanagerbuilder.h" #include "llvm/ir/irbuilder.h" #include "llvm/transforms/utils/basicblockutils.h" using namespace llvm; namespace { struct replacepass : public functionpass { static char id; replacepass() : functionpass(id) {} virtual bool runonfunction(function &f) { allocainst* insttoreplace = ??? basicblock::iterator ii(insttoreplace); replaceinstwithinst(insttoreplace->getparent()->getinstlist(), ii, new allocainst(type::int32ty, 0, insttoreplace)); return true; } }; } char replacepass::id = 0; static void registerreplacepass(const passmanagerbuilder &, legacy::passmanagerbase &pm) { pm.add(new re
Read more

java.lang.NoClassDefFoundError When Creating New Android Project -

-
i've tried installing (and re-installing) android studio several times now, , each time, studio isn't able create new android project. when attempt initial android studio window (ie. basic 'create', 'open', 'import' etc options), i'm asked of questions in wizard, brief progress dialog, followed nothing @ all. if open incomplete project process creates choosing 'open' list, can try choosing create new android project menu. this has same issue, error message in output console time... java.lang.noclassdeffounderror: com/sun/xml/internal/bind/v2/model/annotation/annotationreader (wrong name: com/sun/xml/internal/bind/v0/model/qnnotation/annotationreader) note: when installed android studio, installed incompatible jdk (1.8, not 1.7). have had go default project settings change jdk uses 1.8. does know how can avoid this? there place should downloading jxb classes? missing in java paths? this appears have been caused cor
Read more

Decoding a Python 2 `tempfile` with python-future -

-
i'm attempting write python 2/3 compatible routine fetch csv file, decode latin_1 unicode , feed csv.dictreader in robust, scalable manner. for python 2/3 support, i'm using python-future including imporing open builtins , , importing unicode_literals consistent behaviour i'm hoping handle exceptionally large files spilling disk, using tempfile.spooledtemporaryfile i'm using io.textiowrapper handle decoding latin_1 encoding before feeding dictreader this works fine under python 3. the problem textiowrapper expects wrap stream conforms bufferediobase . unfortunately under python 2, although have imported python 3-style open , vanilla python 2 tempfile.spooledtemporaryfile still of course returns python 2 cstringio.stringo , instead of python 3 io.bytesio required textiowrapper . i can think of these possible approaches: wrap python 2 cstringio.stringo python 3-style io.bytesio . i'm not sure how approach - need write such wrapper or 1 ex
Read more