Главная » PHP » Как мне переместить миниатюры в динамическое слайдшоу

Как мне переместить миниатюры в динамическое слайдшоу

Я пытаюсь переместить миниатюры, которые отображаются вертикально справа от основного изображения.
Я хотел бы отобразить их горизонтально под основным изображением.

Слайд-шоу является динамическим из базы данных MySQL.

Php со страницы дисплея:

    <?php $sqli3 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id ASC LIMIT 0,1";
$resulti3 = mysql_query($sqli3);
$rs3 = mysql_fetch_array($resulti3);
$description = str_replace( ' <br /><br /><br />', '</p>', $rs[pro_desc]);
$description = str_replace( "<br /><br /><br />\r\n", "\n\r<p>", $description);
?>


<div id=show class=slideshow>
<div class=slideshow-images>
<?php $sqli2 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id";
$resulti2 = mysql_query($sqli2);
$i=0;
while($rsi2 = mysql_fetch_array($resulti2)){?>
<a href=><img id=slide-<?php print $i?> src=images/pro-photo/normals/<?php print $rsi2[img_name]?> alt="<?php print $title.' Image '.($i+1)?>"/></a>
<?php $i++;}?>
</div>



<div class=slideshow-thumbnails><ul> <?php $sqli2 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id";
$resulti2 = mysql_query($sqli2);
$i=0;
while($rsi2 = mysql_fetch_array($resulti2)){?>
<li><a href=#slide-<?php print $i?>><img src=images/pro-photo/thumbnails/<?php print $rsi2[img_name]?> alt="<?php print $title.' Slide '.($i+1)?>"/></a></li><?php $i++;}?>

</ul></div>
</div>

И это слайд-шоу CSS

 .slideshow {
display: block;
position: relative;
z-index: 0;

}

.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}

.slideshow {
width: 508px;
height: 375px;
margin: 0 0 20px 0;

}
.slideshow a img {
border: 0;
}

.slideshow-images {
width: 508px;
height: 381px;
}
.slideshow-images-visible {
opacity: 1;
}
.slideshow-images-prev {
opacity: 0;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
position: static;
}

.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
.slideshow-thumbnails li {
float: left;
list-style: none;
margin: 15px 0 0 16px;
position: relative;
}
.slideshow-thumbnails a {
display: block;
float: left;
position: relative;
}
.slideshow-thumbnails a:hover {
/*background-color: #005b79 !important;*/
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
height: 81px;
width: 108px;
}
.slideshow-thumbnails-active {
background-color: #0081ac;
opacity: 1;
}
.slideshow-thumbnails-inactive {
background-color: #FFF;
opacity: .5;
}
.slideshow-thumbnails {
height: 381px;
left: auto;
right: -133px;
top: 0;
position: absolute;
width: 135px;
overflow: auto;
}
.slideshow-thumbnails ul {
height: 100%;
position: absolute;
width: 120px;
}

Любая помощь будет отличной.

Спасибо

Javascript здесь:

function VisualSlideShow(options){
if(options.effect&&options.effect.toLowerCase()=="fade"){options.effect="";}var path="";var regexp=/^(.*)visualslideshow\.js$/;$each($$("script"),function(item,index,object){if(regexp.test(item.src)){var res=regexp.exec(item.src);path=res[1];}});function writeScript(src,text){document.write("<scr"+"ipt type=\"text/javascript\""+(src?" src=\""+path+src+"\"":"")+">"+(text||"")+"</scr"+"ipt>");}writeScript("slideshow.js");if(options.effect){writeScript("slideshow."+options.effect.toLowerCase()+".js");}if(options.sound){writeScript("swfobject.js");}window.addEvent("domready",function(){if(options.sound){window.vssSoundListener={onInit:function(){}};$(options.id).grab(new Element("div",{id:"vssSound"}));swfobject.createSWF({data:path+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener=vssSoundListener&loop=1&autoplay=1&mp3="+options.sound},"vssSound");}var Instance;if(options.effect){Instance=new Slideshow[options.effect](options.id,null,options);}else{Instance=new Slideshow(options.id,null,options);}if(!window.visualslideshow){window.visualslideshow=[];}window.visualslideshow[window.visualslideshow.length]=Instance;var h=$$("#"+options.id+" div.slideshow-images");if(h&&t){var c=new Element("div",{styles:{position:"absolute",right:0,bottom:0,padding:"0 3px 2px",'background-color':"#EEE",'z-index':999999},events:{contextmenu:function(eventObject){return false;}}});




}});}

VisualSlideShow({"duration":2000,"delay":5000,"id":"show","width":508,"height":381,"captions":true,"controller":false,"thumbnails":true,"loop":true,"paused":false,"effect":"Fade"});

0

Решение

Я разработал решение этой проблемы.

PHP не меняет только CSS и JavaScript.

Оба ниже.

CSS

.slideshow {
display: block;
position: relative;
z-index: 0;
}
.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}

.slideshow {
width: 630px;
height: 600px;
margin: 0 auto;
}
.slideshow a img {
border: 0;
}

.slideshow-images {
width: 630px;
height: 434px;
left: 0px;
top: 0px;
}
.slideshow-images-visible {
opacity: 1;
}
.slideshow-images-prev {
opacity: 0;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
position: static;
}

.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
.slideshow-thumbnails li {
float: left;
list-style: none;
margin: 0px 0px 0px 0;
position: relative;
}
.slideshow-thumbnails a {
display: block;
float: left;
padding: 3px;
position: relative;
}
.slideshow-thumbnails a:hover {
background-color: #CCC !important;
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
height: 83px;
width: 120px;
}
.slideshow-thumbnails-active {
background-color: #7A7A7A;
opacity: 0.8;
}
.slideshow-thumbnails-inactive {
background-color: #FFF;
opacity: .5;
}
.slideshow-thumbnails {
top: 420px;
height: 180px;
left: 0;
position: absolute;
width: 630px;
overflow: auto;
}
.slideshow-thumbnails ul {
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 630px;
}
.slideshow {
margin-top: 0px;
}


.slideshow-captions {
background: #000;
bottom: 20px;
color: #FFF;
font: normal 12px/22px Arial, sans-serif;
left: 20px;
overflow: hidden;
position: absolute;
padding: 0 10px;
width: 580px;   /* 100% */
z-index: 10000;
}
.slideshow-captions-hidden {
opacity: 0;
}
.slideshow-captions-visible {
opacity: .7;
}


.slideshow-controller {
background: url(../images/controller.png) no-repeat;
height: 70px;
left: 50%;
margin: -21px 0 0 -96px;
overflow: hidden;
position: absolute;
bottom: 50%;
width: 192px;
z-index: 10000;
}
.slideshow-controller * {
margin: 0;
padding: 0;
}
.slideshow-controller-hidden {
opacity: 0;
}
.slideshow-controller-visible {
opacity: 1;
}
.slideshow-controller a {
cursor: pointer;
display: block;
height: 32px;
overflow: hidden;
position: absolute;
top: 15px;
}
.slideshow-controller a.active {
background-position: 0 32px;
}
.slideshow-controller li {
list-style: none;
}
.slideshow-controller li.first a {
background-image: url(../images/controller-first.png);
left: 13px;
width: 32px;
}
.slideshow-controller li.prev a {
background-image: url(../images/controller-prev.png);
left: 46px;
width: 32px;
}
.slideshow-controller li.pause a {
background-image: url(../images/controller-pause.png);
left: 79px;
width: 32px;
}
.slideshow-controller li.play a {
background-position: 32px 0;
}
.slideshow-controller li.play a.active {
background-position: 32px 32px;
}
.slideshow-controller li.next a {
background-image: url(../images/controller-next.png);
left: 112px;
width: 32px;
}
.slideshow-controller li.last a {
background-image: url(../images/controller-last.png);
left: 145px;
width: 32px;
}


.slideshow-loader {
height: 28px;
right: 0;
position: absolute;
top: 0;
width: 28px;
z-index: 10001;
}
.slideshow-loader-hidden {
opacity: 0;
}
.slideshow-loader-visible {
opacity: 1;
}

Javascript:

function VisualSlideShow(options){
if(options.effect&&options.effect.toLowerCase()=="fade"){options.effect="";}var path="";var regexp=/^(.*)visualslideshow\.js$/;$each($$("script"),function(item,index,object){if(regexp.test(item.src)){var res=regexp.exec(item.src);path=res[1];}});function writeScript(src,text){document.write("<scr"+"ipt type=\"text/javascript\""+(src?" src=\""+path+src+"\"":"")+">"+(text||"")+"</scr"+"ipt>");}writeScript("slideshow.js");if(options.effect){writeScript("slideshow."+options.effect.toLowerCase()+".js");}if(options.sound){writeScript("swfobject.js");}window.addEvent("domready",function(){if(options.sound){window.vssSoundListener={onInit:function(){}};$(options.id).grab(new Element("div",{id:"vssSound"}));swfobject.createSWF({data:path+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener=vssSoundListener&loop=1&autoplay=1&mp3="+options.sound},"vssSound");}var Instance;if(options.effect){Instance=new Slideshow[options.effect](options.id,null,options);}else{Instance=new Slideshow(options.id,null,options);}if(!window.visualslideshow){window.visualslideshow=[];}window.visualslideshow[window.visualslideshow.length]=Instance;var h=$$("#"+options.id+" div.slideshow-images");if(h&&t){var c=new Element("div",{styles:{position:"absolute",right:0,bottom:0,padding:"0 3px 2px",'background-color':"#EEE",'z-index':999999},events:{contextmenu:function(eventObject){return false;}}});




}});}

VisualSlideShow({"duration":2000,"delay":5000,"id":"show","width":630,"height":420,"captions":false,"controller":false,"thumbnails":true,"loop":true,"paused":false,"effect":"Fade"});

Я надеюсь, что это поможет другим людям, ищущим слайд-шоу, управляемые MySQL.

0

Другие решения

Других решений пока нет …

Источник
По вопросам рекламы [email protected]
Web-Answers © 2024 Наверх