javascript - Google+ Style Image Gallery -

-

i'm trying emmulate following:

enter image description here

any ideas how? photos have same height , photos arrange/cropped/resized dynamically fit on rows there no jagged sides left or right. if resize browser window resizes photos fit. have tried isotope , jquery masonry , neither give me effect.

i implemented thing. here's how did it:

  1. when page loads, measure available width of target container (the container images live), , call maxwidth
  2. i make ajax call, passing maxwidth server
  3. i determine list of gallery images display on server, , process each 1 one
  4. during iteration of list, keep adding images row, row's length being maxwidth available (which passed up). once image overflows maxwidth, calculate overflow amount
  5. i take overflow amount, divide number of images in row, , subtract value off each of images in row (so 1 image doesn't width reduced much)
  6. i repeat each row, each row adds maxwidth

some things had consider:

  1. i had take account width of margins wanted in between each image, , factor maxwidth accumulated value when processing each row.
  2. we needed corner stamp image (an image larger , fixed in top left corner. image encompassed 2 rows, , wider other thumbnails. had calculate different maxwidth first 2 rows consequence.
  3. i had recalculate dimensions when browser resized. binding resize event of window caused multiple ajax calls during dragging. had fix resize event fired when done.

overall, image gallery turned out quite well. he's screenshot.

enter image description here


Comments

Post a Comment

Popular posts from this blog

delphi - How to convert bitmaps to video? -

-
Image
my application creates images fractals , love feeling of 'flying' around fractal. once saved 2000 bitmaps file , created avi using premiere. experience rather frustrating though succeeded in creating movie. spectacular. of course want create video application. don't care niftyness of codec, compression or whatever. want have video can replay on systems. in past have tried never succeeded. triggered question alas not ffmpeg running. update i decided adapt question , put bounty it. have seen several solutions attractive (because it's simple) seems me taviwrite. tried taviwriter did not succeed. in procedure taviwriter.write; function call around line 370 avierr := avisavev(s, // pchar(filename), nil, // file handler nil, // callback nstreams, // number of streams streams, compoptions); // compress options
Read more

jasper reports - Fixed header in Excel using JasperReports -

-
how can create excel report fixed header using japserreports? mean need header fixed when scroll excel file. this possible adding couple properties in jrxml file each report. take @ advanced excel features freeze panes. if wanted freeze after first column header (down left side basically) this: <statictext> <reportelement style="sans_bold" mode="opaque" x="0" y="60" width="104" height="20" forecolor="#ffffff" backcolor="#666666"> <property name="net.sf.jasperreports.export.xls.auto.filter" value="start"/> <property name="net.sf.jasperreports.export.xls.column.width" value="110"/> <property name="net.sf.jasperreports.export.xls.freeze.column.edge" value="left"/> </reportelement> &
Read more

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -

-
import pyodbc,nltk,array cnxn = pyodbc.connect('driver={mysql odbc 5.1 driver};server=127.0.0.1;port=3306;database=information_schema;user=root; password=1234;option=3;') cursor = cnxn.cursor() cursor.execute("use collegedatabase ;") cursor.execute("select * sampledata ; ") cnxn.commit() s=[] j=[] x=[] words = [] w = [] sfq = [] pos=[] entry in cursor: s.append(entry.injury_type),j.append(entry.injury_desc) nltk.tokenize import punktwordtokenizer nltk.corpus import stopwords tokenizer = punktwordtokenizer() english_stops = set(stopwords.words('english')) in range(0,26): # filter stop words tokenizer.tokenize(j[i]) w.append([word word in tokenizer.tokenize(j[i]) if word not in english_stops]) in range(0 , 26):#converting tokenzied text ito string sfq.append(" ".join(w[a])) replacers import regexpreplacer replacer = regexpreplacer() in range (0,26):#pos tagging replacer.repl
Read more