I've been trying to get a photoset viewer working for tumblr, and I can't get the viewer to change to the height of the content photos.The only time the code works is when the height of px-slideshow is set to a specific height.\[code\]{block
hotoset}<div class="post photoset"> <div class="px-slideshow" id="px-slideshow-{PostID}"> {blockhotos} <a href="http://stackoverflow.com/questions/15577095/{Permalink}" class="view" rel="{PostID}"> <img src="http://stackoverflow.com/questions/15577095/{PhotoURL-500}" alt="{PhotoAlt}"/> </a> {/blockhotos} <div class="px-viewer-controls" id=""> <div id="px-prev-{PostID}" class="px-prev"></div> <div id="px-next-{PostID}" class="px-next"></div> <div id="px-pause-{PostID}" class="px-pause"></div> <div id="px-play-{PostID}" class="px-play"></div> </div> <div class="px-loading"></div> </div></div>{/blockhotoset}\[/code\]and the css\[code\] .px-viewer-controls { position:absolute; bottom:-41px; height:41px; width:500px; background:url('http://static.tumblr.com/bte9rhd/U08l8rrxy/controls_bg.png') no-repeat; z-index:1337; margin-top:-41px; } .px-viewer-controls div.px-prev, .px-viewer-controls div.px-next, .px-viewer-controls div.px-pause, .px-viewer-controls div.px-play { display:block; height:16px; width:17px; position:absolute; bottom:12px; background:url('http://static.tumblr.com/bte9rhd/0nhl8rs0d/controls.png'); border:none !important; text-indent:-9999999px; z-index:1338; cursorointer; } .px-viewer-controls div.px-prev { left:14px; background-position:0 -34px !important; } .px-viewer-controls div.px-next { right:14px; background-position:0 -51px !important; } .px-viewer-controls div.px-pause { left:323px; bottom:11px; height:17px; background-position:0 -86px !important; } .px-viewer-controls div.px-play { right: 320px; background-position:0 -103px !important; display:none; } .photoset-caption { margin-top:26px; } .px-slideshow { background:#000000; position:relative; overflow:hidden; width:100%; height:100%; padding:1px 1px 1px 1px } .px-slideshow a { width:500px; text-align:center; display:block; position:absolute; opacity:0; z-index:-1337; height:281px; } .px-slideshow a.live { z-index:1337; } .px-slideshow a img { max-width:500px; } .px-slideshow img { display:block; } .px-slideshow a.view.live { min-height:281px; } .px-loading { width:500px; height:281px; background:url('http://static.tumblr.com/gmeghwp/WqZlwf0gz/loadinfo.net.gif') 50% 50% no-repeat; }\[/code\]
hotoset}<div class="post photoset"> <div class="px-slideshow" id="px-slideshow-{PostID}"> {blockhotos} <a href="http://stackoverflow.com/questions/15577095/{Permalink}" class="view" rel="{PostID}"> <img src="http://stackoverflow.com/questions/15577095/{PhotoURL-500}" alt="{PhotoAlt}"/> </a> {/blockhotos} <div class="px-viewer-controls" id=""> <div id="px-prev-{PostID}" class="px-prev"></div> <div id="px-next-{PostID}" class="px-next"></div> <div id="px-pause-{PostID}" class="px-pause"></div> <div id="px-play-{PostID}" class="px-play"></div> </div> <div class="px-loading"></div> </div></div>{/blockhotoset}\[/code\]and the css\[code\] .px-viewer-controls { position:absolute; bottom:-41px; height:41px; width:500px; background:url('http://static.tumblr.com/bte9rhd/U08l8rrxy/controls_bg.png') no-repeat; z-index:1337; margin-top:-41px; } .px-viewer-controls div.px-prev, .px-viewer-controls div.px-next, .px-viewer-controls div.px-pause, .px-viewer-controls div.px-play { display:block; height:16px; width:17px; position:absolute; bottom:12px; background:url('http://static.tumblr.com/bte9rhd/0nhl8rs0d/controls.png'); border:none !important; text-indent:-9999999px; z-index:1338; cursorointer; } .px-viewer-controls div.px-prev { left:14px; background-position:0 -34px !important; } .px-viewer-controls div.px-next { right:14px; background-position:0 -51px !important; } .px-viewer-controls div.px-pause { left:323px; bottom:11px; height:17px; background-position:0 -86px !important; } .px-viewer-controls div.px-play { right: 320px; background-position:0 -103px !important; display:none; } .photoset-caption { margin-top:26px; } .px-slideshow { background:#000000; position:relative; overflow:hidden; width:100%; height:100%; padding:1px 1px 1px 1px } .px-slideshow a { width:500px; text-align:center; display:block; position:absolute; opacity:0; z-index:-1337; height:281px; } .px-slideshow a.live { z-index:1337; } .px-slideshow a img { max-width:500px; } .px-slideshow img { display:block; } .px-slideshow a.view.live { min-height:281px; } .px-loading { width:500px; height:281px; background:url('http://static.tumblr.com/gmeghwp/WqZlwf0gz/loadinfo.net.gif') 50% 50% no-repeat; }\[/code\]