Face and Neck Before & After - Miami Beach, FL - Miami Center for Plastic Surgery

.fn-featured{background:#1A1A1A;padding:60px 20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} .fn-featured-eyebrow{font-size:11px !important;font-weight:500 !important;letter-spacing:0.22em !important;text-transform:uppercase !important;color:#B89A6A !important;margin-bottom:10px !important;text-align:center !important} .fn-featured-heading{font-family:Georgia,serif !important;font-size:clamp(24px,3vw,36px) !important;font-weight:400 !important;color:#fff !important;text-align:center !important;margin-bottom:40px !important;line-height:1.2 !important} .fn-featured-heading em{font-style:italic !important;color:#D4B98A !important} .fn-featured-grid{max-width:1120px;margin:0 auto} .fn-feat-card{display:block;text-decoration:none;background:rgba(255,255,255,0.05);border:1px solid rgba(184,154,106,0.25);overflow:hidden;height:100%;transition:border-color .2s,transform .2s} .fn-feat-card:hover{border-color:rgba(184,154,106,0.6);transform:translateY(-3px)} .fn-feat-info{padding:18px 20px 14px} .fn-feat-badge{display:inline-block;font-size:10px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;background:rgba(184,154,106,0.15);color:#D4B98A;padding:4px 10px;border:1px solid rgba(184,154,106,0.35);margin-bottom:8px} .fn-feat-name{font-family:Georgia,serif;font-size:22px;font-weight:400;color:#fff;line-height:1;margin-bottom:4px} .fn-feat-meta{font-size:12px;font-weight:300;letter-spacing:0.1em;color:#D4B98A;text-transform:uppercase} .fn-feat-poster{position:relative;padding-top:70%;overflow:hidden;background:#000} .fn-feat-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.4s} .fn-feat-card:hover .fn-feat-poster img{transform:scale(1.04)} .fn-feat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,0.8) 0%,rgba(26,26,26,0.1) 60%)} .fn-feat-cta{position:absolute;bottom:14px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;z-index:2} .fn-feat-cta span{font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:#fff} .fn-feat-arrow{width:38px;height:38px;border-radius:50%;background:rgba(184,154,106,0.92);color:#1A1A1A;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .2s,background .2s} .fn-feat-card:hover .fn-feat-arrow{transform:translateX(3px);background:#D4B98A} .container-fluid { padding-right: 0px!important; padding-left: 0px!important; } Patient spotlights Real stories, real results Featured patient Meet Carroll Age 58 · Facelift View Carroll's story→ Featured patient Meet Penny Age 61 · Facelift View Penny's story→ .fn-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f7f6f4;padding:40px 20px 48px} .fn-fb{font-size:13px;padding:7px 18px;border-radius:20px;border:1px solid #ddd;background:#fff;color:#555;cursor:pointer;transition:all .15s;font-family:inherit} .fn-fb:hover{border-color:#aaa;color:#111} .fn-fb.on{background:#111;color:#fff;border-color:#111} .fn-count{text-align:center;font-size:13px;color:#888;padding:10px 0 16px} .fn-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e8e4df;transition:box-shadow .2s;cursor:pointer;height:100%} .fn-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.09)} /* single-image cards (unchanged look) */ .fn-img-wrap{position:relative;overflow:hidden;background:#f0eee9;height:210px;display:flex;align-items:center;justify-content:center} .fn-img-wrap img.fn-img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center!important;display:block;transition:transform .3s} .fn-card:hover .fn-img{transform:scale(1.03)} /* ── SPLIT-FRAME STRIP (montage cards) ── */ .fn-strip-wrap{position:relative;background:#eef0f4;height:210px} .fn-strip-scroll{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} .fn-strip-scroll::-webkit-scrollbar{display:none} .fn-frame{flex:0 0 100%;min-width:0;overflow:hidden;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center} .fn-frame-inner{width:100%;height:100%;background-repeat:no-repeat;background-color:#eef0f4} .fn-strip-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;border:none;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;transition:opacity .2s} .fn-card:hover .fn-strip-arrow{opacity:1} .fn-strip-arrow.pv{left:8px} .fn-strip-arrow.nx{right:8px} .fn-strip-arrow:disabled{opacity:0 !important;pointer-events:none} .fn-strip-count{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;z-index:2} .fn-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2;flex-wrap:wrap;padding:0 10px} .fn-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.4);transition:background .2s,transform .2s} .fn-dot.on{background:#fff;transform:scale(1.35)} .fn-zoom{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.45);color:#fff;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;z-index:2} .fn-card:hover .fn-zoom{opacity:1} .fn-meta{padding:13px 15px 15px} .fn-tag{display:inline-block;font-size:11px;font-weight:500;padding:3px 10px;border-radius:4px;margin-bottom:7px} .fn-tag-facelift{background:#f0e8fb;color:#5b1aa0} .fn-tag-necklift{background:#e8f0fb;color:#1a4fa0} .fn-tag-bleph{background:#e6f4ea;color:#1a6e38} .fn-tag-fat{background:#fef3e2;color:#b45309} .fn-tag-eyelid{background:#fce8f0;color:#a01a5b} .fn-tag-ear{background:#e8f7fb;color:#1a7a8f} .fn-tag-chin{background:#f5f0e8;color:#7a5c1a} .fn-tag-fillers{background:#f0f5e8;color:#4a7a1a} .fn-card h3{font-size:14px;font-weight:500;color:#111;margin:0 0 4px;line-height:1.35} .fn-card p{font-size:12px;color:#666;line-height:1.55;margin:0} .fn-disc{text-align:center;font-size:11px;color:#aaa;padding:24px 0 0;max-width:640px;margin:0 auto;line-height:1.6} .fn-modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center} .fn-modal.open{display:flex} .fn-overlay{position:absolute;inset:0;background:rgba(0,0,0,.9)} .fn-modal-inner{position:relative;z-index:1;max-width:94vw;max-height:92vh;display:flex;flex-direction:column;align-items:center} .fn-modal-stage{max-width:94vw;display:flex;align-items:center;justify-content:center} .fn-modal-img{max-width:100%;max-height:78vh;border-radius:8px;display:block;object-fit:contain} .fn-mframe{max-width:94vw;height:78vh;background-repeat:no-repeat;background-color:#111;border-radius:8px} .fn-modal-meta{margin-top:14px;text-align:center;color:#fff} .fn-modal-meta strong{font-size:15px;display:block;margin-bottom:4px} .fn-modal-meta span{font-size:13px;color:rgba(255,255,255,.65)} .fn-modal-fcount{margin-top:8px;font-size:12px;color:rgba(255,255,255,.6)} .fn-modal-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;background:#fff;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:#111;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:3} .fn-modal-prev,.fn-modal-next{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2} .fn-modal-prev{left:16px} .fn-modal-next{right:16px} .fn-modal-prev:hover,.fn-modal-next:hover{background:rgba(255,255,255,.3)} All cases Face & neck lift Neck lift Eyelid surgery Fat grafting Ear surgery Chin augmentation Fillers Real patient results. Individual outcomes vary. All procedures performed by board-certified plastic surgeons. ← × → const BASE="https://storage.googleapis.com/treatspace-prod-media/pracimg/u-3304/"; /* ── SPLIT MAP ────────────────────────────────────────────── Montages to break into separate frames, keyed by filename. Three ways to define one: {c: cols, r: rows} -> even grid (uses INSET) {cols:[[x0,x1],...], rows:[[y0,y1],...]} -> explicit rows x cols windows {frames:[[x,y,w,h],...]} -> fully custom windows (any layout) Frames read left-to-right, top-to-bottom (or in the order listed for `frames`). Not listed = shown as a single image (unchanged). NOTE: any entry that resolves to 2 or fewer frames is now rendered as a single whole image (see framesFor). Leaving 2-frame entries in the map is harmless — framesFor short-circuits them. INSET zooms even-grid frames in slightly to swallow dotted guide lines / seam drift — raise it if a sliver of the neighbor shows. Slide23 uses Slide12's mixed-layout windows (same 4-small + 2-large shape); if a frame clips oddly, nudge its [x,y,w,h] to match Slide23's exact pixels. */ const INSET=0.02; const GRID={ "Slide1_pU22zXV.webp":{c:2,r:1}, "Slide2_9gFmWA8.webp":{c:3,r:2}, "Slide3-2.webp":{c:4,r:1}, "Slide4-2.webp":{cols:[[0.010,0.236],[0.240,0.477],[0.500,0.753],[0.757,0.992]],rows:[[0.010,0.492],[0.508,0.990]]}, "Slide5-2.webp":{c:2,r:1}, "Slide6-2.webp":{c:2,r:1}, "Slide7-2.webp":{c:2,r:2}, "Slide10-2.webp":{c:2,r:2}, "Slide11-2.webp":{c:2,r:2}, "Slide12-2.webp":{frames:[[0.005,0.005,0.195,0.487],[0.210,0.005,0.215,0.487],[0.005,0.508,0.195,0.487],[0.210,0.508,0.215,0.487],[0.445,0.225,0.270,0.610],[0.725,0.225,0.273,0.610]]}, "Slide14-2.webp":{c:2,r:3}, "Slide15-2.webp":{c:2,r:2}, "Slide16-2.webp":{c:2,r:2}, "Slide18-2.webp":{c:2,r:2}, "Slide19-2.webp":{c:2,r:3}, "Slide20-2.webp":{c:2,r:2}, "Slide21-2.webp":{c:2,r:2}, "Slide22-1.webp":{c:2,r:2}, "Slide23-1.webp":{frames:[[0.005,0.005,0.195,0.487],[0.210,0.005,0.215,0.487],[0.005,0.508,0.195,0.487],[0.210,0.508,0.215,0.487],[0.445,0.225,0.270,0.610],[0.725,0.225,0.273,0.610]]}, "Slide24-1.webp":{c:1,r:2} }; const CASES=[ {img:"Slide1_pU22zXV.webp",cat:"Neck Lift",title:"Neck lift",detail:"Lateral-view neck lift showing defined jawline and smoother neck contour."}, {img:"Slide2_9gFmWA8.webp",cat:"Neck Lift",title:"Isolated neck lift",detail:"Multi-view frontal and lateral results. Significant reduction in neck laxity."}, {img:"Slide3-2.webp",cat:"Face & Neck Lift",title:"Face/neck lift + lower bleph + fat grafting",detail:"Comprehensive facial rejuvenation with lower blepharoplasty and fat grafting for volume restoration."}, {img:"Slide4-2.webp",cat:"Face & Neck Lift",title:"Face/neck lift + fat grafting",detail:"Full facelift with fat grafting to lips and mid-face. Multi-angle before and after views."}, {img:"Slide5-2.webp",cat:"Eyelid Surgery",title:"Quad bleph + face/neck lift",detail:"Four-lid blepharoplasty combined with facelift and necklift for comprehensive facial renewal."}, {img:"Slide6-2.webp",cat:"Fat Grafting",title:"Fat grafting + face/neck lift",detail:"Fat grafting with facial focus combined with face and neck lift. Dramatic under-eye and mid-face volumization."}, {img:"Slide7-2.webp",cat:"Face & Neck Lift",title:"Face/neck lift",detail:"Multi-view face and neck lift showing improved jawline definition and skin tightening."}, {img:"Slide10-2.webp",cat:"Neck Lift",title:"Isolated/hidden neck lift",detail:"Frontal and lateral neck lift with hidden incisions. Refined jawline and reduced neck banding."}, {img:"Slide11-2.webp",cat:"Neck Lift",title:"Isolated neck lift — early result",detail:"Close-up frontal and lateral views of isolated neck lift at early healing stage."}, {img:"Slide12-2.webp",cat:"Neck Lift",title:"Isolated neck lift + lower bleph",detail:"Male patient — neck lift with lower blepharoplasty. Lateral and frontal multi-view comparison."}, {img:"Slide14-2.webp",cat:"Neck Lift",title:"Central neck lift",detail:"Male patient with central neck lift via minimal incision approach. Multi-angle neck views."}, {img:"Slide15-2.webp",cat:"Face & Neck Lift",title:"Face and neck lift",detail:"Lateral multi-view face and neck lift showing significant improvement in neck-chin angle."}, {img:"Slide16-2.webp",cat:"Neck Lift",title:"Isolated neck lift",detail:"Hidden-incision neck lift showing dramatic reduction in platysmal banding and skin laxity."}, {img:"Slide17-2.webp",cat:"Eyelid Surgery",title:"Quad bleph + face and neck lift",detail:"Four-lid blepharoplasty with comprehensive face and neck lift for full facial rejuvenation."}, {img:"Slide18-2.webp",cat:"Neck Lift",title:"Isolated hidden neck lift",detail:"Multi-view hidden-incision neck lift showing frontal, lateral, and oblique improvements."}, {img:"Slide19-2.webp",cat:"Eyelid Surgery",title:"Quad bleph + face/neck lift + fat grafting",detail:"Complete facial rejuvenation — blepharoplasty, facelift, necklift, and fat grafting combined."}, {img:"Slide20-2.webp",cat:"Neck Lift",title:"Central neck lift",detail:"Male patient — central neck lift with dramatic reduction in submental fullness and banding."}, {img:"Slide21-2.webp",cat:"Face & Neck Lift",title:"Face and neck lift",detail:"Transgender patient — face and neck lift with lateral and oblique before and after views."}, {img:"Slide22-1.webp",cat:"Face & Neck Lift",title:"Deep resurfacing + face and neck lift",detail:"Sciton deep resurfacing combined with face and neck lift for comprehensive skin renewal."}, {img:"Slide23-1.webp",cat:"Face & Neck Lift",title:"Face and neck lift",detail:"Multi-view face and neck lift with frontal, lateral, and oblique angle comparisons."}, {img:"Slide24-1.webp",cat:"Face & Neck Lift",title:"Face and neck lift",detail:"Frontal before and after comparison showing facial tightening and improved overall contour."}, {img:"Face1_u06ohZM.webp",cat:"Face & Neck Lift",title:"Facelift — front view",detail:"Full facelift showing improved midface contour and jawline definition."}, {img:"T_cmIFJM0.webp",cat:"Face & Neck Lift",title:"Facelift — 3/4 view",detail:"Three-quarter view facelift result showing natural improvement in cheek and jaw contour."}, {img:"T_uLFeQDx.webp",cat:"Face & Neck Lift",title:"Penny, age 61 — facelift",detail:"Dramatic before and after facelift result. Significant improvement in facial laxity and neck definition."}, {img:"Face2-1.webp",cat:"Face & Neck Lift",title:"Facelift — before",detail:"Pre-operative facelift view showing facial laxity and skin changes."}, {img:"Face5-1.webp",cat:"Face & Neck Lift",title:"Carroll, age 58 — facelift",detail:"Full facelift result showing significant improvement in facial contour and skin laxity."}, {img:"Face18-1.webp",cat:"Face & Neck Lift",title:"Male facelift — front view",detail:"Male facelift showing natural masculine rejuvenation with improved jawline definition."}, {img:"Face18-2.webp",cat:"Face & Neck Lift",title:"Male facelift — side view",detail:"Lateral male facelift view demonstrating improved neck and jawline contour."}, {img:"Upper_Eyelids_1.webp",cat:"Eyelid Surgery",title:"Upper eyelids — blepharoplasty",detail:"Upper eyelid blepharoplasty showing removal of excess skin and improved eye opening."}, {img:"Upper_Eyelids_2.webp",cat:"Eyelid Surgery",title:"Upper eyelids — blepharoplasty",detail:"Upper lid blepharoplasty result with refreshed, more youthful eyelid appearance."}, {img:"Upper_and_Lower_Eyelids_1.webp",cat:"Eyelid Surgery",title:"Upper & lower eyelids",detail:"Combined upper and lower blepharoplasty showing comprehensive eyelid rejuvenation."}, {img:"Upper_and_Lower_Eyelids_2.webp",cat:"Eyelid Surgery",title:"Upper & lower eyelids",detail:"Four-lid blepharoplasty result with improved upper lid hooding and lower lid puffiness."}, {img:"Upper_and_Lower_Eyelids_3.webp",cat:"Eyelid Surgery",title:"Upper & lower eyelids",detail:"Combined blepharoplasty showing natural, rested appearance post-procedure."}, {img:"Upper_and_Lower_Eyelids_4.webp",cat:"Eyelid Surgery",title:"Upper & lower eyelids",detail:"Upper and lower lid blepharoplasty with reduction of under-eye bags and lid laxity."}, {img:"Lower_Eyelids_1.webp",cat:"Eyelid Surgery",title:"Lower eyelids — blepharoplasty",detail:"Lower lid blepharoplasty showing reduction of under-eye bags and improved contour."}, {img:"Lower_Eyelids_2.webp",cat:"Eyelid Surgery",title:"Lower eyelids — blepharoplasty",detail:"Lower blepharoplasty result with smoother lower eyelid-cheek junction."}, {img:"Lower_Eyelids_3.webp",cat:"Eyelid Surgery",title:"Lower eyelids — blepharoplasty",detail:"Lower lid blepharoplasty demonstrating reduced puffiness and refreshed appearance."}, {img:"patient-3246-otoplasty-before-after-570x190.webp",cat:"Ear Surgery",title:"Otoplasty — ear reshaping",detail:"Otoplasty showing correction of prominent ears with natural, balanced result."}, {img:"patient-3246-otoplasty-before-after-2-570x190.webp",cat:"Ear Surgery",title:"Otoplasty — ear reshaping",detail:"Ear pinning procedure with improved ear position and natural antihelical fold."}, {img:"patient-3246-otoplasty-before-after-3-570x190.webp",cat:"Ear Surgery",title:"Otoplasty — pediatric case",detail:"Pediatric otoplasty showing correction of prominent ears with excellent symmetric result."}, {img:"patient-3246-otoplasty-before-after-4-570x190.webp",cat:"Ear Surgery",title:"Earlobe repair",detail:"Earlobe repair showing restoration of normal earlobe anatomy following gauge or tear."}, {img:"patient-7628-chin-augmentation-with-implant-before-after-570x190.webp",cat:"Chin Augmentation",title:"Chin augmentation with implant",detail:"Chin implant showing improved chin projection and enhanced profile balance."}, {img:"patient-3172-chin-augmentation-with-implant-before-after-570x190.webp",cat:"Chin Augmentation",title:"Chin augmentation with implant",detail:"Chin implant result with natural-looking projection and improved facial harmony."}, {img:"patient-3123-fillers-injectables-before-after-2-570x190.webp",cat:"Fillers",title:"Lip fillers — volume and definition",detail:"Lip filler treatment showing enhanced volume, improved lip border definition, and natural shape."}, {img:"Lip_Lift.webp",cat:"Fillers",title:"Lip lift",detail:"Surgical lip lift showing increased upper lip show, improved cupid's bow definition, and reduced philtrum length."} ]; const TAG={ "Face & Neck Lift":"fn-tag-facelift","Neck Lift":"fn-tag-necklift","Eyelid Surgery":"fn-tag-eyelid", "Fat Grafting":"fn-tag-fat","Ear Surgery":"fn-tag-ear","Chin Augmentation":"fn-tag-chin","Fillers":"fn-tag-fillers" }; const ZOOM_SVG=''; const HIDDEN_CASES=new Set([ "Slide2_9gFmWA8.webp", "Slide3-2.webp", "Slide4-2.webp", "Slide7-2.webp", "Slide10-2.webp", "Slide11-2.webp", "Slide12-2.webp", "Slide14-2.webp", "Slide15-2.webp", "Slide16-2.webp", "Slide19-2.webp", "Slide18-2.webp", "Slide20-2.webp", "Slide21-2.webp", "Slide22-1.webp", "Slide23-1.webp", "T_cmIFJM0.webp", "T_uLFeQDx.webp", "Face2-1.webp" ]); let active="All",filtered=[],modalIdx=0; /* Build a slice window object from fractional x,y,w,h */ function win(x,y,w,h){ return { x:x,y:y,w:w,h:h, sizeX:100/w, sizeY:100/h, posX: w>=1?0:(x/(1-w))*100, posY: h>=1?0:(y/(1-h))*100 }; } /* Return the frame windows for a case, or null if it should render as a /* TRIM_CACHE holds auto-detected content windows (blank padding trimmed) per image, so the actual photo/face sits centered instead of the raw grid cell. */ const TRIM_CACHE={}; function framesFor(c){ if(TRIM_CACHE[c.img]) return TRIM_CACHE[c.img]; const g=GRID[c.img]; if(!g) return null; const out=[]; if(g.frames){ g.frames.forEach(function(f){ out.push(win(f[0],f[1],f[2],f[3])); }); } else if(g.cols&&g.rows;){ g.rows.forEach(function(ry){ g.cols.forEach(function(cx){ out.push(win(cx[0],ry[0],cx[1]-cx[0],ry[1]-ry[0])); }); }); } else { for(let row=0;row236 && g>236 && b>236); if(!blank){ if(xxmaxX)maxX=xx; if(yymaxY)maxY=yy; } } } if(maxX<0) return f; /* all blank: keep the grid cell */ const pad=step*2; minX=Math.max(0,minX-pad); minY=Math.max(0,minY-pad); maxX=Math.min(W-1,maxX+pad); maxY=Math.min(H-1,maxY+pad); return win((X+minX)/NW,(Y+minY)/NH,(maxX-minX+1)/NW,(maxY-minY+1)/NH); } function analyzeStrip(scroll,c,nominalFrames){ if(TRIM_CACHE[c.img]) return; const direct=BASE+c.img; const proxied="https://wsrv.nl/?url="+encodeURIComponent(direct.replace(/^https?:\/\//,"")); const sources=[direct, proxied]; /* direct works if the bucket allows CORS; else the proxy adds it */ (function tryNext(idx){ if(idx>=sources.length) return; /* all failed: keep the grid windows */ const im=new Image(); im.crossOrigin="anonymous"; im.onload=function(){ let ctx; try{ const cv=document.createElement("canvas"); cv.width=im.naturalWidth; cv.height=im.naturalHeight; ctx=cv.getContext("2d",{willReadFrequently:true}); ctx.drawImage(im,0,0); }catch(e){ tryNext(idx+1); return; } const trimmed=[]; for(let i=0;ic.cat===active); const cnt=document.getElementById("fn-count"); if(cnt)cnt.textContent="Showing "+filtered.length+" case"+(filtered.length!==1?"s":""); const grid=document.getElementById("fn-grid"); if(!grid)return; grid.innerHTML=""; STRIPS=[]; filtered.forEach(function(c,i){ const col=document.createElement("div"); col.className="col-12 col-sm-6 col-lg-4"; const card=document.createElement("div"); card.className="fn-card"; card.dataset.i=i; const frames=framesFor(c); if(frames){ const wrap=document.createElement("div"); wrap.className="fn-strip-wrap"; const scroll=document.createElement("div"); scroll.className="fn-strip-scroll"; frames.forEach(function(f){ const fr=document.createElement("div"); fr.className="fn-frame"; const inner=document.createElement("div"); inner.className="fn-frame-inner"; inner.style.backgroundImage="url('"+BASE+c.img+"')"; fr.appendChild(inner); scroll.appendChild(fr); }); wrap.appendChild(scroll); STRIPS.push({scroll:scroll,frames:frames,img:c.img}); const pv=document.createElement("button"); pv.className="fn-strip-arrow pv"; pv.innerHTML="‹"; const nx=document.createElement("button"); nx.className="fn-strip-arrow nx"; nx.innerHTML="›"; const cnt2=document.createElement("div"); cnt2.className="fn-strip-count"; cnt2.textContent="1 / "+frames.length; const dots=document.createElement("div"); dots.className="fn-dots"; frames.forEach(function(_,di){const d=document.createElement("div"); d.className="fn-dot"+(di===0?" on":""); dots.appendChild(d);}); wrap.appendChild(pv); wrap.appendChild(nx); wrap.appendChild(cnt2); wrap.appendChild(dots); const zoom=document.createElement("div"); zoom.className="fn-zoom"; zoom.innerHTML=ZOOM_SVG; wrap.appendChild(zoom); card.appendChild(wrap); function cur(){var w=scroll.clientWidth;return w?Math.round(scroll.scrollLeft/w):0;} function update(){ const k=cur(); cnt2.textContent=(k+1)+" / "+frames.length; dots.querySelectorAll(".fn-dot").forEach(function(d,di){d.classList.toggle("on",di===k);}); pv.disabled=k =frames.length-1; } scroll.addEventListener("scroll",function(){window.requestAnimationFrame(update);}); pv.addEventListener("click",function(e){e.stopPropagation();scroll.scrollBy({left:-scroll.clientWidth,behavior:"smooth"});}); nx.addEventListener("click",function(e){e.stopPropagation();scroll.scrollBy({left:scroll.clientWidth,behavior:"smooth"});}); zoom.addEventListener("click",function(e){e.stopPropagation();openModal(i,cur());}); let sx=0,moved=false; scroll.addEventListener("pointerdown",function(e){sx=e.clientX;moved=false;}); scroll.addEventListener("pointermove",function(e){if(Math.abs(e.clientX-sx)>6)moved=true;}); scroll.addEventListener("click",function(){if(!moved)openModal(i,cur());}); requestAnimationFrame(update); coverFrames(scroll,c,frames,update); } else { const wrap=document.createElement("div"); wrap.className="fn-img-wrap"; const img=document.createElement("img"); img.className="fn-img"; img.loading="lazy"; img.src=BASE+c.img; img.alt=c.title; const zoom=document.createElement("div"); zoom.className="fn-zoom"; zoom.innerHTML=ZOOM_SVG; wrap.appendChild(img); wrap.appendChild(zoom); card.appendChild(wrap); card.addEventListener("click",function(){openModal(i,0);}); } const meta=document.createElement("div"); meta.className="fn-meta"; meta.innerHTML=''+c.cat+''+c.title+''+c.detail+''; card.appendChild(meta); col.appendChild(card); grid.appendChild(col); }); } /* ── MODAL ── */ let modalFrames=null, modalFrameIdx=0, modalNat=null; function openModal(i,frameIdx){ modalIdx=i; const c=filtered[i]; const stage=document.getElementById("fn-modal-stage"); document.getElementById("fn-modal-title").textContent=c.title; document.getElementById("fn-modal-detail").textContent=c.detail; stage.innerHTML=""; modalFrames=framesFor(c); modalFrameIdx=frameIdx||0; modalNat=null; if(modalFrames){ if(modalFrameIdx>=modalFrames.length)modalFrameIdx=modalFrames.length-1; const box=document.createElement("div"); box.className="fn-mframe"; box.style.backgroundImage="url('"+BASE+c.img+"')"; box.style.visibility="hidden"; /* hide until sized to avoid a mis-scaled flash */ stage.appendChild(box); const im=new Image(); im.onload=function(){ modalNat={w:im.naturalWidth,h:im.naturalHeight}; showModalFrame(); }; im.src=BASE+c.img; if(im.complete && im.naturalWidth){ modalNat={w:im.naturalWidth,h:im.naturalHeight}; } showModalFrame(); } else { const img=document.createElement("img"); img.className="fn-modal-img"; img.src=BASE+c.img; img.alt=c.title; stage.appendChild(img); document.getElementById("fn-modal-fcount").textContent=""; } document.getElementById("fn-modal").classList.add("open"); document.body.style.overflow="hidden"; } function showModalFrame(){ if(!modalFrames)return; const box=document.querySelector("#fn-modal-stage .fn-mframe"); if(!box)return; const n=modalFrames.length; modalFrameIdx=(modalFrameIdx+n)%n; const f=modalFrames[modalFrameIdx]; document.getElementById("fn-modal-fcount").textContent="View "+(modalFrameIdx+1)+" of "+n; if(!modalNat){ return; } /* wait for load; onload calls this again */ const NW=modalNat.w, NH=modalNat.h; const maxW=window.innerWidth*0.94, maxH=window.innerHeight*0.78; const winW=f.w*NW, winH=f.h*NH; const scale=Math.min(maxW/winW, maxH/winH); /* contain: whole frame fits */ const boxW=scale*winW, boxH=scale*winH; box.style.width=Math.round(boxW)+"px"; box.style.height=Math.round(boxH)+"px"; box.style.backgroundSize=Math.round(scale*NW)+"px "+Math.round(scale*NH)+"px"; box.style.backgroundPosition=Math.round(-scale*f.x*NW)+"px "+Math.round(-scale*f.y*NH)+"px"; box.style.visibility="visible"; } function closeModal(){ document.getElementById("fn-modal").classList.remove("open"); document.body.style.overflow=""; modalFrames=null; modalNat=null; } /* Arrows: step frames within a montage, spilling over to the next/prev case */ function step(dir){ if(modalFrames){ const next=modalFrameIdx+dir; if(next>=0 && next