我正在尝试使用Galleria插件进行图像处理.它工作正常,我可以通过参数将高度设置为0.66,高度将是宽度的66%,这是响应.
问题是,缩略图也包含在这个高度中,并且当在手机上观看时拇指不会变得更小,因此图像的高度逐渐变小,不再是66和更长.
我的问题是,如何使图像保持比例(没有考虑缩略图的高度)或(我想这更容易实现):如何旋转平板电脑或手机时动态设置高度比例(在浏览器调整大小是).使用小屏幕尺寸我想保持1:1的比例,因为拇指开始变得如此大于主图像),并且在480px宽度之后我希望比率为1:0.66.
在Galleria初始化并刷新拱廊尺寸后,有没有办法更改高度参数？我知道有一个refresh()参数,但我不确定如何动态更改高度比参数.
我似乎无法在任何地方找到这个记录.基本上我只想在整个幻灯片中自动显示标题...
提前致谢...
这是我的HTML(即时通讯使用Galleria图库 - 基于JQuery)
<div id="galleria">
<img alt="Productname 1" src="bens_img/1.jpg">
<img alt="Productname 2" src="bens_img/2.jpg">
<img alt="Productname 3" src="bens_img/3.jpg">
<img alt="Guess what?" src="bens_img/4.jpg">
</div>
伪代码
Get string from <alt> from <img>
Create a new <li> and paste the <alt> string from <img> in it
这应该用所有(即:四个)img alt字符串完成.它应该如下所示:
<ul class="textformat">
<li>Productname 1</li>
<li>Productname 2</li>
<li>Productname 3</li>
<li>Guess what?</li>
</ul> <!-- yeah this was all done by java-script -->
我正在使用Galleria插件,但我想要做的是将主要对象置于Galleria滑块内的音频播放器中心.但是我怎么能这样做呢？
以下是基本的拱廊风格:
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>
我在这里有演示应用程序页面:DEMO
更新:
下面是当前代码,尝试选择滑块中的每个特定音频播放器并将其居中:
<?php
$j = 0;
?>
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; margin:0; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<a href="audio.php?key=<?php echo $key; ?>&j=<?php echo $j; ?>&a=<?php echo $a; ?>"><img class="iframe" src="Images/audiothumbnail.png"></a>
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
$(window).load(function(){
var key = '<?php echo $key; ?>'; …我正在玩这个图书馆,Galleria,非常整洁.这是下面的网址:
http://devkick.com/lab/galleria/
但我无论如何都看不到用键盘(右,左等)从一个缩略图移动到另一个缩略图..有没有人使用这个图书馆,这有用吗？
问题围绕着一个名为"Galleria"的jQuery画廊.这是非常美观的,因为我的客户是摄影师,我以为我会在Galleria画廊展示他的所有图片.
您可以在这里查看该网站的测试版本:http://jeremywebbphotography.com/testing/index.php - (如果情况发生变化,那是因为我现在正在研究它).
基本上,问题是:如果您浏览到任何图库页面,它们似乎工作正常.万岁!除此之外,在查看任何类型的随机数后,一段时间后图像停止加载并出现.将出现缩略图,但如果您单击其中任何一个,图像将短暂显示然后突然消失.我在这个网站上工作了无数个小时,现在我才发现了这个问题.
对我来说,整合一个新的图库解决方案并不容易,因为我已经设置了一个非常具体的结构,这需要我花费数小时的时间来完成.
到目前为止,我只在Safari中发现了问题,但我相信它也可能在其他浏览器中发生.可以通过重新启动浏览器来解决问题,但显然在向我的客户提供专业服务时,这对他或用户来说显然不够好.问题是,我知道无法触发错误 - 它似乎是随机发生的.
我需要一些认真的帮助.我没有时间或耐心通过新画廊重新设计这一点.
我正在使用jQuery提供的代码.此外,Galleria在jquery.galleria.js中提供了这个代码 - 如果你可以从中获得任何绽放的感觉...我猜这有点毫无意义,但嘿......
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){4 q;q=$.23.7=5(k){6(!q.1o()){Q J}$.1p(q.1b);4 l={Z:\'.1q\',K:E,10:E,1c:5(a,b,c){},1r:5(a){}};4 m=$.11(l,k);1d(4 i 24 m){6(i){$.7[i]=m[i]}}4 n=($(m.Z).R(m.Z))?$(m.Z):3(B.12(\'1e\')).25(8);4 o=$(B.12(\'1e\')).u(\'1s\');4 p=$(B.12(\'1f\')).u(\'1g\');n.u(\'1q\').13(o).13(p);Q 8.1t(5(){$(8).u(\'7\');$(8).1u(\'L\').1t(5(i){4 b=$(8);4 c=$.26?$.11({},m,b.27()):m;c.10=$(8).R(\':28-S\')?J:c.10;4 d=$(8).T(\'a\').R(\'a\')?$(8).T(\'a\'):J;4 e=$(8).1u(\'F\').C(\'M\',\'U\');4 f=d?d.9(\'1v\'):e.9(\'1h\');4 g=d?d.9(\'14\'):e.9(\'14\');4 j=1w 1x();6(c.K&&(N.r.t&&N.r.t.V(/\\#/,\'\')==f)){b.G(\'.D\').W(\'D\');b.u(\'D\')}$(j).29(5(){$(8).9(\'1y\',e.9(\'1y\'));4 a=d?d.T(\'F\').u(\'1z 1A\').C(\'M\',\'U\'):e.2a(E).u(\'1z\').C(\'M\',\'U\');6(d){d.2b(a)}6(!a.1B(\'1A\')){4 w=1i.1C(e.v()/e.y()*b.y());4 h=1i.1C(e.y()/e.v()*b.v());6(w<h){a.C({y:\'1D\',v:b.v(),1E:-(h-b.y())/2})}s{a.C({v:\'1D\',y:b.y(),1F:-(w-b.v())/2})}}s{N.1G(5(){a.C({1F:-(a.v()-b.v())/2,1E:-(a.y()-b.y())/2})},1)}a.9(\'O\',f);a.9(\'14\',g);a.1H(5(){$.7.X(f)});a.P(5(){$(8).u(\'P\')},5(){$(8).W(\'P\')});b.P(5(){b.u(\'P\')},5(){b.W(\'P\')});b.1I(a);a.C(\'M\',\'2c\');c.1r(3(a));6(b.1B(\'D\')){$.7.X(f)}e.1J()}).1K(5(){b.2d(\'<1f 2e="1K" 1L="2f:2g">2h 2i 2j: \'+f+\'</1f>\')}).9(\'1h\',f)})})};q.1M=5(a){Q $(a).R(\':1N-S\')?$(a).G(\':1O-S\'):$(a).1j()};q.1P=5(a){Q $(a).R(\':1O-S\')?$(a).G(\':1N-S\'):$(a).1Q()};q.1o=5(){$(\'1R\').13($(B.12(\'1e\')).9(\'1S\',\'1k\').C({v:\'1T\',y:\'1T\',M:\'U\'}));4 a=($(\'#1k\').v()!=1)?J:E;$(\'#1k\').1J();Q a};q.1b=5(a){4 b=$(\'.1s\');4 c=$(\'.7 F[O="\'+a+\'"]\');6(a){6($.7.K){N.r=N.r.1v.V(/\\#.*/,\'\')+\'#\'+a}c.15(\'L\').G(\'.D\').W(\'D\');c.15(\'L\').u(\'D\');4 d=$(1w 1x()).9(\'1h\',a).u(\'2k\');b.1U().13(d);b.G(\'.1g\').2l(c.9(\'14\'));$.7.1c(d,b.G(\'.1g\'),c);6($.7.10){d.C(\'2m\',\'2n\').1H(5(){$.7.1j()})}}s{b.G().2o().1U();$(\'.7 L.D\').W(\'D\')}$.7.16=a};$.11({7:{16:\'\',1c:5(){},X:5(a){6($.7.K){$.1V(a)}s{q.1b(a)}},1j:5(){4 a=$(q.1M($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)},1Q:5(){4 a=$(q.1P($(\'.7 F[O="\'+$.7.16+\'"]\').15(\'L\'))).T(\'F\').9(\'O\');$.7.X(a)}}})})(3);3.11({z:17,x:17,1p:5(a){3.x=a;4 b=r.t;3.z=b;6(3.H.1l){6(3.z===\'\'){3.z=\'#\'}$("1R").1I(\'<1W 1S="18" 1L="M: U;"></1W>\');4 c=$("#18")[0];4 d=c.1m.B;d.1X();d.1Y();d.r.t=b}s 6($.H.19){3.A=[];3.A.I=K.I;3.1a=[];3.Y=E}3.x(b.V(/^#/,\'\'));2p(3.1Z,2q)},20:5(a){3.A.21(a);3.1a.I=0;8.Y=E},1Z:5(){6(3.H.1l){4 a=$("#18")[0];4 b=a.2r||a.1m.B;4 c=b.r.t;6(c!=3.z){r.t=c;3.z=c;3.x(c.V(/^#/,\'\'))}}s 6($.H.19){6(!3.1n){4 d=K.I-3.A.I;6(d){3.Y=J;4 i;6(d<0){1d(i=0;i<1i.2s(d);i++){3.1a.2t(3.A.2u())}}s{1d(i=0;i<d;i++){3.A.21(3.1a.2v())}}4 e=3.A[3.A.I-1];6(e!==17){3.z=r.t;3.x(e)}}s …我想调整整个galleria div的大小,并调整使用galleria脚本动态生成的所有图像.
到目前为止我有
$(window).resize(function() {
var h = $(window).height();
var galleriaHeight = h-54;
var w = $(".content").width();
var galleriaWidth = w-18;
$("#galleria").height(galleriaHeight);
$("#galleria").width(w);
$(".galleria-stage").height(galleriaHeight);
$(".galleria-stage").width(galleriaWidth);
$(".galleria-images .galleria-image img").css({"max-height":"auto"});
$(".galleria-images .galleria-image img").css({"max-width":galleriaWidth-36});
$(".galleria-stage").height(galleriaHeight);
$(".galleria-stage").width(galleriaWidth);
$(".galleria-container").width(w);
$(".galleria-container").height(galleriaHeight);
$(".caption").width(w);
$(".counter-nav").width(w);
var sidebarHeight =h-54;
var contentHeight =h-36;
$(".sidebar1").height(sidebarHeight);
$(".content").height(contentHeight);
});
但是一切都在不均衡地扩展并且非常混乱.看完全屏代码后,我还补充道
this.bind(Galleria.RESCALE, function() {
POS = this.getStageHeight() - tab.height() - 2;
thumbs.css('top', OPEN ? POS - list.outerHeight() + 2 : POS);
var img = this.getActiveImage();
if (img)
{
fixCaption(img);
}
});
但这也不起作用......
我想我想在我调整大小后重新加载页面...或者相对于彼此调整所有元素的大小,或者使用Galleria调整大小脚本......
有任何想法吗？
我正在网站上实现Galleria幻灯片,我在大多数情况下都能正常工作.我正在使用api来自定义幻灯片的外观,我想从图像中获取alt文本并显示在div中(我现在只是登录到firebug控制台)
这是我写的脚本:
<script type="text/javascript">
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 420,
height: 370,
autoplay: 5000, // will move forward every 5 seconds
extend: function(options) {
var gallery = this; // "this" is the gallery instance
this.bind("loadstart", function(e) {
var currImg = gallery.getActiveImage();
var altText = $(currImg).attr('alt');
console.log(altText);
});
}
});
</script>
似乎这会起作用,但我在控制台中"未定义".有谁知道如何从"Galleria"图像中获取alt文本？API文档说.getActiveImage()方法返回一个返回IMG元素,所以我不确定我是否以正确的方式使用IMG元素,或者它是否有我可以抓取的替代文本.
我也试过使用我的图像ID,这是
('slideshow_image_' + e.index)
但这也给了我一个未定义的日志结果.
我知道HTML中有一个名为slideshow_image_0等的元素,我认为按元素ID查找alt文本并显示它很容易.如果我查看firebug的HTML选项卡,整个div是完全不同的,并且图像被galleria动态填充到这些部分中.不知道该怎么办...请帮忙!
如果您在Galleria的实例中使用了全屏模式,您已经看到关闭它的唯一方法是按下转义键.
因为我喜欢这个功能,因为它非常实用,对于最终用户而言,它并不那么直观,所以我想在右上方添加一个关闭按钮.
我检查了代码以找出添加该按钮的位置,但我无法理解它以使其工作.
有人已经做到了吗？我希望我不是唯一有这个想法的人.
谢谢您的帮助!
我们正在使用Galleria库(http://galleria.io/)从一组用户选择的图像中动态生成幻灯片.用户还可以选择一些选项,如高度,宽度,转换速度,显示/隐藏缩略图轮播等.这些设置适用于Galleria选项.
现在,当用户选择隐藏轮播时,我设置相关选项,使旋转木马中的缩略图消失.但是,容器div(使用css类galleria-thumbnails-container)仍占用一些空白.我尝试改变这个类的几个css属性以及没有运气的galleria容器.
我尝试过的事情:
我已经通过了Galleria doc,但他们似乎没有办法解决这个问题.所以这是一个css hack.有任何想法吗？
谢谢.