Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Erro com array de imagens

15-06-2016 20:40

Classe de slide
<?php require_once 'Controle.php'; class Slide extends Controle { public $db; public $slide_id; public $slide_imagem; public $slide_nome; public $slide_subtitulo; public $slide_subtitulo1; public $result; public function __construct() { parent::__construct(); $this->db = new DB; } public function incluir() { $this->insert("slide", "slide_imagem, slide_nome, slide_subtitulo, slide_subtitulo1", "'$this->slide_imagem', '$this->slide_nome', '$this->slide_subtitulo', '$this->slide_subtitulo1'"); } public function atualizar() { $query = "slide_nome ='$this->slide_nome', slide_subtitulo = '$this->slide_subtitulo', slide_subtitulo1 = '$this->slide_subtitulo1'"; if (isset($_FILES['slide_imagem']['name']) && !empty($_FILES['slide_imagem']['name'])) { $query .= ", slide_imagem = '$this->slide_imagem'"; } $this->update("slide", "$query", "slide_id = '$this->slide_id'"); } public function remover() { $this->delete("slide", "slide_id = '$this->slide_id'"); } public function removerArquivo() { $this->deleteArquivo("slide", "slide_id = '$this->slide_id'", "slide_imagem", "../assets/images/slide/"); } public function getImagem() { $this->select("slide", "", "*", "", "WHERE slide_id = $this->slide_id", ""); } public function getImagens() { $this->select("slide"); } public function enviar() { $this->upload("../assets/images/slide/", "slide_imagem", ""); } public function JSON() { $this->getJSON("slide", "slide_id = '$this->slide_id'"); } }

Página de imagens
<style type="text/css"> <!-- @import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light); html,body{height:970px;} *{outline:none;} body{margin:0px; padding:0px; background:#000;} #toolbar{position:absolute; z-index:3; bottom:10px; padding:5px; background:url(roletagem/fs_img_g_bg.png);} #toolbar img{border:none;} #img_title{position:absolute; z-index:3; left:10px; top:10px; padding:10px; background:url(roletagem/fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;} #bg{ z-index:1; overflow:hidden; left:10px; top:10px; width:100%; height:970px;} #bgimg{display:none; -ms-interpolation-mode: bicubic;} #preloader{position:relative; z-index:3; width:32px; padding:20px; top:80px; margin:auto; background:#000;} #thumbnails_wrapper{z-index:2; position:absolute; bottom:150px; width:100%; background:url(roletagem/empty.gif); /* stupid ie needs a background value to understand hover area */} #outer_container{position:relative; padding:0; width:100%;} #outer_container .thumbScroller{position:relative; overflow:hidden; background:url(roletagem/fs_img_g_bg.png);} #outer_container .thumbScroller, #outer_container .thumbScroller .container, #outer_container .thumbScroller .content{height:170px; } #outer_container .thumbScroller .container{position:relative; left:0;} #outer_container .thumbScroller .content{float:left;} #outer_container .thumbScroller .content div{margin:5px; height:100%;} #outer_container .thumbScroller img{border:5px solid #fff;} #outer_container .thumbScroller .content div a{display:block; padding:5px;} .nextImageBtn, .prevImageBtn{display:block; position:absolute; width:50px; height:50px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;} .nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;} .nextImageBtn{right:0; background:#000 url(roletagem/nextImgBtn.png) center center no-repeat;} .prevImageBtn{background:#000 url(roletagem/prevImgBtn.png) center center no-repeat;} --> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="roletagem/jquery.easing.1.3.js"></script> <?php $slide = new Slide(); $slide->getImagens(); ?> <?php if (isset($slide->db->data[0])): ?> <div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="assets/images/slide/<?= $slide->slide_imagem ?>" width="1680" height="800" alt="Denebola" title="Denebola" id="bgimg" /></div> <div id="preloader"><img src="roletagem/ajax-loader_dark.gif" width="32" height="32" /></div> <div id="img_title"></div> <div id="toolbar"></div> <div id="thumbnails_wrapper"> <div id="outer_container"> <div class="thumbScroller"> <div class="container"> <div class="content"> <a href="assets/images/slide/<?= $slide->slide_imagem ?>"><img src="assets/images/slide/<?= $slide->slide_imagem ?>" title="Denebola" alt="Denebola" class="thumb" width="200" height="170"/></a> </div> </div> </div> </div> </div> <?php endif; ?> <script> //config //set default images view mode $defaultViewMode="full"; //full, normal, original $tsMargin=30; //first and last thumbnail margin (for better cursor interaction) $scrollEasing=600; //scroll easing amount (0 for no easing) $scrollEasingType="easeOutCirc"; //scroll easing type $thumbnailsContainerOpacity=0.8; //thumbnails area default opacity $thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out $thumbnailsOpacity=0.6; //thumbnails default opacity $nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show") $keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off") //cache vars $thumbnails_wrapper=$("#thumbnails_wrapper"); $outer_container=$("#outer_container"); $thumbScroller=$(".thumbScroller"); $thumbScroller_container=$(".thumbScroller .container"); $thumbScroller_content=$(".thumbScroller .content"); $thumbScroller_thumb=$(".thumbScroller .thumb"); $preloader=$("#preloader"); $toolbar=$("#toolbar"); $toolbar_a=$("#toolbar a"); $bgimg=$("#bgimg"); $img_title=$("#img_title"); $nextImageBtn=$(".nextImageBtn"); $prevImageBtn=$(".prevImageBtn"); $(window).load(function() { $toolbar.data("imageViewMode",$defaultViewMode); //default view mode if($defaultViewMode=="full"){ $toolbar_a.html("<img src='roletagem/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore"); } else { $toolbar_a.html("<img src='roletagem/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize"); } ShowHideNextPrev($nextPrevBtnsInitState); //thumbnail scroller $thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin sliderLeft=$thumbScroller_container.position().left; sliderWidth=$outer_container.width(); $thumbScroller.css("width",sliderWidth); var totalContent=0; fadeSpeed=200; var $the_outer_container=document.getElementById("outer_container"); var $placement=findPos($the_outer_container); $thumbScroller_content.each(function () { var $this=$(this); totalContent+=$this.innerWidth(); $thumbScroller_container.css("width",totalContent); $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity); }); $thumbScroller.mousemove(function(e){ if($thumbScroller_container.width()>sliderWidth){ var mouseCoords=(e.pageX - $placement[1]); var mousePercentX=mouseCoords/sliderWidth; var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX)); var thePosA=mouseCoords-destX; var thePosB=destX-mouseCoords; if(mouseCoords>destX){ $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing } else if(mouseCoords<destX){ $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing } else { $thumbScroller_container.stop(); } } }); $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity); $thumbnails_wrapper.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo("slow", 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); } ); $thumbScroller_thumb.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo(fadeSpeed, 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity); } ); //on window resize scale image and reset thumbnail scroller $(window).resize(function() { FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH")); $thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); var newWidth=$outer_container.width(); $thumbScroller.css("width",newWidth); sliderWidth=newWidth; $placement=findPos($the_outer_container); }); //load 1st image var the1stImg = new Image(); the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload); the1stImg.src = $bgimg.attr("src"); $outer_container.data("nextImage",$(".content").first().next().find("a").attr("href")); $outer_container.data("prevImage",$(".content").last().find("a").attr("href")); }); function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){ $this.fadeOut("fast",function(){ $this.attr("src", "").attr("src", imgSrc); //change image source FullScreenBackground($this,imageWidth,imageHeight); //scale background image $preloader.fadeOut("fast",function(){$this.fadeIn("slow");}); var imageTitle=$img_title.data("imageTitle"); if(imageTitle){ $this.attr("alt", imageTitle).attr("title", imageTitle); $img_title.fadeOut("fast",function(){ $img_title.html(imageTitle).fadeIn(); }); } else { $img_title.fadeOut("fast",function(){ $img_title.html($this.attr("title")).fadeIn(); }); } }); } //mouseover toolbar if($toolbar.css("display")!="none"){ $toolbar.fadeTo("fast", 0.4); } $toolbar.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo("fast", 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo("fast", 0.4); } ); //Clicking on thumbnail changes the background image $("#outer_container a").click(function(event){ event.preventDefault(); var $this=$(this); GetNextPrevImages($this); GetImageTitle($this); SwitchImage(this); ShowHideNextPrev("show"); }); //next/prev images buttons $nextImageBtn.click(function(event){ event.preventDefault(); SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); }); $prevImageBtn.click(function(event){ event.preventDefault(); SwitchImage($outer_container.data("prevImage")); var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); }); //next/prev images keyboard arrows if($keyboardNavigation=="on"){ $(document).keydown(function(ev) { if(ev.keyCode == 39) { //right arrow SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); return false; // don't execute the default action (scrolling or whatever) } else if(ev.keyCode == 37) { //left arrow SwitchImage($outer_container.data("prevImage")); var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); return false; // don't execute the default action (scrolling or whatever) } }); } function ShowHideNextPrev(state){ if(state=="hide"){ $nextImageBtn.fadeOut(); $prevImageBtn.fadeOut(); } else { $nextImageBtn.fadeIn(); $prevImageBtn.fadeIn(); } } //get image title function GetImageTitle(elem){ var title_attr=elem.children("img").attr("title"); //get image title attribute $img_title.data("imageTitle", title_attr); //store image title } //get next/prev images function GetNextPrevImages(curr){ var nextImage=curr.parents(".content").next().find("a").attr("href"); if(nextImage==null){ //if last image, next is first var nextImage=$(".content").first().find("a").attr("href"); } $outer_container.data("nextImage",nextImage); var prevImage=curr.parents(".content").prev().find("a").attr("href"); if(prevImage==null){ //if first image, previous is last var prevImage=$(".content").last().find("a").attr("href"); } $outer_container.data("prevImage",prevImage); } //switch image function SwitchImage(img){ $preloader.fadeIn("fast"); //show preloader var theNewImg = new Image(); theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload); theNewImg.src = img; } //get new image dimensions function CreateDelegate(contextObject, delegateMethod){ return function(){ return delegateMethod.apply(contextObject, arguments); } } //new image on load function theNewImg_onload(){ $bgimg.data("newImageW",this.width).data("newImageH",this.height); BackgroundLoad($bgimg,this.width,this.height,this.src); } //Image scale function function FullScreenBackground(theItem,imageWidth,imageHeight){ var winWidth=$(window).width(); var winHeight=$(window).height(); if($toolbar.data("imageViewMode")!="original"){ //scale var picHeight = imageHeight / imageWidth; var picWidth = imageWidth / imageHeight; if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode if ((winHeight / winWidth) < picHeight) { $(theItem).attr("width",winWidth); $(theItem).attr("height",picHeight*winWidth); } else { $(theItem).attr("height",winHeight); $(theItem).attr("width",picWidth*winHeight); }; } else { //normal size image mode if ((winHeight / winWidth) > picHeight) { $(theItem).attr("width",winWidth); $(theItem).attr("height",picHeight*winWidth); } else { $(theItem).attr("height",winHeight); $(theItem).attr("width",picWidth*winHeight); }; } $(theItem).css("margin-left",(winWidth-$(theItem).width())/2); $(theItem).css("margin-top",(winHeight-$(theItem).height())/2); } else { //no scale $(theItem).attr("width",imageWidth); $(theItem).attr("height",imageHeight); $(theItem).css("margin-left",(winWidth-imageWidth)/2); $(theItem).css("margin-top",(winHeight-imageHeight)/2); } } //Image view mode function - fullscreen or normal size function ImageViewMode(theMode){ $toolbar.data("imageViewMode", theMode); FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH")); if(theMode=="full"){ $toolbar_a.html("<img src='roletagem/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore"); } else { $toolbar_a.html("<img src='roletagem/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize"); } } //function to find element Position function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft curtop = obj.offsetTop while (obj = obj.offsetParent) { curleft += obj.offsetLeft curtop += obj.offsetTop } } return [curtop, curleft]; } </script>

Só aparece a primeira imagem, as proximas imagens não vem junto no select por que ? obrigado
0
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Erro com array de imagens

16-06-2016 01:36

Script original é esse http://manos.malihu.gr/tuts/malihu-jque ... llery.html

Código com erro, pois tem 2 imagens cadastrada no banco de dados e ele mostra somente a 1 aonde está o erro ?

<style type="text/css"> <!-- @import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light); html,body{height:970px;} *{outline:none;} body{margin:0px; padding:0px; background:#000;} #toolbar{position:absolute; z-index:3; bottom:10px; padding:5px; background:url(roletagem/fs_img_g_bg.png);} #toolbar img{border:none;} #img_title{position:absolute; z-index:3; left:10px; top:10px; padding:10px; background:url(roletagem/fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;} #bg{ z-index:1; overflow:hidden; left:10px; top:10px; width:100%; height:970px;} #bgimg{display:none; -ms-interpolation-mode: bicubic;} #preloader{position:relative; z-index:3; width:32px; padding:20px; top:80px; margin:auto; background:#000;} #thumbnails_wrapper{z-index:2; position:absolute; bottom:150px; width:100%; background:url(roletagem/empty.gif); /* stupid ie needs a background value to understand hover area */} #outer_container{position:relative; padding:0; width:100%;} #outer_container .thumbScroller{position:relative; overflow:hidden; background:url(roletagem/fs_img_g_bg.png);} #outer_container .thumbScroller, #outer_container .thumbScroller .container, #outer_container .thumbScroller .content{height:170px; } #outer_container .thumbScroller .container{position:relative; left:0;} #outer_container .thumbScroller .content{float:left;} #outer_container .thumbScroller .content div{margin:5px; height:100%;} #outer_container .thumbScroller img{border:5px solid #fff;} #outer_container .thumbScroller .content div a{display:inline; float:left; padding:5px;} .nextImageBtn, .prevImageBtn{display:block; position:absolute; width:50px; height:50px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;} .nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;} .nextImageBtn{right:0; background:#000 url(roletagem/nextImgBtn.png) center center no-repeat;} .prevImageBtn{background:#000 url(roletagem/prevImgBtn.png) center center no-repeat;} --> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="roletagem/jquery.easing.1.3.js"></script> <?php $slide = new Slide(); $slide->getImagens(); ?> <?php if (isset($slide->db->data)): ?> <div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="assets/images/slide/<?= $slide->slide_imagem ?>" width="1680" height="800" alt="Denebola" title="Denebola" id="bgimg" /></div> <div id="preloader"><img src="roletagem/ajax-loader_dark.gif" width="32" height="32" /></div> <div id="img_title"></div> <div id="toolbar"></div> <div id="thumbnails_wrapper"> <div id="outer_container"> <div class="thumbScroller"> <div class="container"> <div class="content"> <?php foreach ($slide->db->data as $images): ?><div><a href="assets/images/slide/<?= $images->slide_imagem ?>"><img src="assets/images/slide/<?= $images->slide_imagem ?>" title="Denebola" alt="Denebola" width="200" height="150" /></a> </div><?php endforeach ?> </div> </div> </div> </div> </div> <?php endif ?> <script> //config //set default images view mode $defaultViewMode="full"; //full, normal, original $tsMargin=30; //first and last thumbnail margin (for better cursor interaction) $scrollEasing=600; //scroll easing amount (0 for no easing) $scrollEasingType="easeOutCirc"; //scroll easing type $thumbnailsContainerOpacity=0.8; //thumbnails area default opacity $thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out $thumbnailsOpacity=0.6; //thumbnails default opacity $nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show") $keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off") //cache vars $thumbnails_wrapper=$("#thumbnails_wrapper"); $outer_container=$("#outer_container"); $thumbScroller=$(".thumbScroller"); $thumbScroller_container=$(".thumbScroller .container"); $thumbScroller_content=$(".thumbScroller .content"); $thumbScroller_thumb=$(".thumbScroller .thumb"); $preloader=$("#preloader"); $toolbar=$("#toolbar"); $toolbar_a=$("#toolbar a"); $bgimg=$("#bgimg"); $img_title=$("#img_title"); $nextImageBtn=$(".nextImageBtn"); $prevImageBtn=$(".prevImageBtn"); $(window).load(function() { $toolbar.data("imageViewMode",$defaultViewMode); //default view mode if($defaultViewMode=="full"){ $toolbar_a.html("<img src='roletagem/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore"); } else { $toolbar_a.html("<img src='roletagem/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize"); } ShowHideNextPrev($nextPrevBtnsInitState); //thumbnail scroller $thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin sliderLeft=$thumbScroller_container.position().left; sliderWidth=$outer_container.width(); $thumbScroller.css("width",sliderWidth); var totalContent=0; fadeSpeed=200; var $the_outer_container=document.getElementById("outer_container"); var $placement=findPos($the_outer_container); $thumbScroller_content.each(function () { var $this=$(this); totalContent+=$this.innerWidth(); $thumbScroller_container.css("width",totalContent); $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity); }); $thumbScroller.mousemove(function(e){ if($thumbScroller_container.width()>sliderWidth){ var mouseCoords=(e.pageX - $placement[1]); var mousePercentX=mouseCoords/sliderWidth; var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX)); var thePosA=mouseCoords-destX; var thePosB=destX-mouseCoords; if(mouseCoords>destX){ $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing } else if(mouseCoords<destX){ $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing } else { $thumbScroller_container.stop(); } } }); $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity); $thumbnails_wrapper.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo("slow", 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); } ); $thumbScroller_thumb.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo(fadeSpeed, 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity); } ); //on window resize scale image and reset thumbnail scroller $(window).resize(function() { FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH")); $thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); var newWidth=$outer_container.width(); $thumbScroller.css("width",newWidth); sliderWidth=newWidth; $placement=findPos($the_outer_container); }); //load 1st image var the1stImg = new Image(); the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload); the1stImg.src = $bgimg.attr("src"); $outer_container.data("nextImage",$(".content").first().next().find("a").attr("href")); $outer_container.data("prevImage",$(".content").last().find("a").attr("href")); }); function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){ $this.fadeOut("fast",function(){ $this.attr("src", "").attr("src", imgSrc); //change image source FullScreenBackground($this,imageWidth,imageHeight); //scale background image $preloader.fadeOut("fast",function(){$this.fadeIn("slow");}); var imageTitle=$img_title.data("imageTitle"); if(imageTitle){ $this.attr("alt", imageTitle).attr("title", imageTitle); $img_title.fadeOut("fast",function(){ $img_title.html(imageTitle).fadeIn(); }); } else { $img_title.fadeOut("fast",function(){ $img_title.html($this.attr("title")).fadeIn(); }); } }); } //mouseover toolbar if($toolbar.css("display")!="none"){ $toolbar.fadeTo("fast", 0.4); } $toolbar.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo("fast", 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo("fast", 0.4); } ); //Clicking on thumbnail changes the background image $("#outer_container a").click(function(event){ event.preventDefault(); var $this=$(this); GetNextPrevImages($this); GetImageTitle($this); SwitchImage(this); ShowHideNextPrev("show"); }); //next/prev images buttons $nextImageBtn.click(function(event){ event.preventDefault(); SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); }); $prevImageBtn.click(function(event){ event.preventDefault(); SwitchImage($outer_container.data("prevImage")); var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); }); //next/prev images keyboard arrows if($keyboardNavigation=="on"){ $(document).keydown(function(ev) { if(ev.keyCode == 39) { //right arrow SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); return false; // don't execute the default action (scrolling or whatever) } else if(ev.keyCode == 37) { //left arrow SwitchImage($outer_container.data("prevImage")); var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); return false; // don't execute the default action (scrolling or whatever) } }); } function ShowHideNextPrev(state){ if(state=="hide"){ $nextImageBtn.fadeOut(); $prevImageBtn.fadeOut(); } else { $nextImageBtn.fadeIn(); $prevImageBtn.fadeIn(); } } //get image title function GetImageTitle(elem){ var title_attr=elem.children("img").attr("title"); //get image title attribute $img_title.data("imageTitle", title_attr); //store image title } //get next/prev images function GetNextPrevImages(curr){ var nextImage=curr.parents(".content").next().find("a").attr("href"); if(nextImage==null){ //if last image, next is first var nextImage=$(".content").first().find("a").attr("href"); } $outer_container.data("nextImage",nextImage); var prevImage=curr.parents(".content").prev().find("a").attr("href"); if(prevImage==null){ //if first image, previous is last var prevImage=$(".content").last().find("a").attr("href"); } $outer_container.data("prevImage",prevImage); } //switch image function SwitchImage(img){ $preloader.fadeIn("fast"); //show preloader var theNewImg = new Image(); theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload); theNewImg.src = img; } //get new image dimensions function CreateDelegate(contextObject, delegateMethod){ return function(){ return delegateMethod.apply(contextObject, arguments); } } //new image on load function theNewImg_onload(){ $bgimg.data("newImageW",this.width).data("newImageH",this.height); BackgroundLoad($bgimg,this.width,this.height,this.src); } //Image scale function function FullScreenBackground(theItem,imageWidth,imageHeight){ var winWidth=$(window).width(); var winHeight=$(window).height(); if($toolbar.data("imageViewMode")!="original"){ //scale var picHeight = imageHeight / imageWidth; var picWidth = imageWidth / imageHeight; if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode if ((winHeight / winWidth) < picHeight) { $(theItem).attr("width",winWidth); $(theItem).attr("height",picHeight*winWidth); } else { $(theItem).attr("height",winHeight); $(theItem).attr("width",picWidth*winHeight); }; } else { //normal size image mode if ((winHeight / winWidth) > picHeight) { $(theItem).attr("width",winWidth); $(theItem).attr("height",picHeight*winWidth); } else { $(theItem).attr("height",winHeight); $(theItem).attr("width",picWidth*winHeight); }; } $(theItem).css("margin-left",(winWidth-$(theItem).width())/2); $(theItem).css("margin-top",(winHeight-$(theItem).height())/2); } else { //no scale $(theItem).attr("width",imageWidth); $(theItem).attr("height",imageHeight); $(theItem).css("margin-left",(winWidth-imageWidth)/2); $(theItem).css("margin-top",(winHeight-imageHeight)/2); } } //Image view mode function - fullscreen or normal size function ImageViewMode(theMode){ $toolbar.data("imageViewMode", theMode); FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH")); if(theMode=="full"){ $toolbar_a.html("<img src='roletagem/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore"); } else { $toolbar_a.html("<img src='roletagem/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize"); } } //function to find element Position function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft curtop = obj.offsetTop while (obj = obj.offsetParent) { curleft += obj.offsetLeft curtop += obj.offsetTop } } return [curtop, curleft]; } </script>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Erro com array de imagens

16-06-2016 08:01

O que acontece é o seguinte:

No código original cada imagem deve estar em uma div com a classe content, como mostrado abaixo as duas imagens:

<div class="content"> <div><a href="images/Universe_and_planets_digital_art_wallpaper_denebola.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a></div> </div> <div class="content"> <div><a href="images/Universe_and_planets_digital_art_wallpaper_lux.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a></div> </div>

No seu código você fez o seguinte:

<div class="content"> <?php foreach ($slide->db->data as $images): ?><div><a href="assets/images/slide/<?= $images->slide_imagem ?>"><img src="assets/images/slide/<?= $images->slide_imagem ?>" title="Denebola" alt="Denebola" width="200" height="150" /></a> </div><?php endforeach ?> </div>

O que acontece é que a div content é um bloco único para uma imagem, e no seu código a div content está sendo aberta fora do foreach, fazendo o loop de imagens sem estar no bloco.

Para consertar esse erro toda a div content deve ser aberta e fechada dentro do foreach.

Tenta o seguinte:

<?php foreach ($slide->db->data as $images): ?> <div class="content"> <div><a href="assets/images/slide/<?= $images->slide_imagem ?>"><img src="assets/images/slide/<?= $images->slide_imagem ?>" title="Denebola" alt="Denebola" width="200" height="150" /></a> </div> </div> <?php endforeach ?>

O que fiz foi puxar a abertura e fechamento da div cotent para dentro do foreach.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Erro com array de imagens

16-06-2016 13:25

Eu havia tentado desta forma que você me indicou acima, só que não deu certo aparece somente a primeira imagem, as demais em diantes ficam ocultas abaixo, quer que eu te mande print ? obrigado
0
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Erro com array de imagens

16-06-2016 14:40

Acho que o problema é no css pois da segunda imagem em diante ele está descendo para baixo.
0
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Erro com array de imagens

16-06-2016 15:55

Resolvi praticamente tudo, só ainda continua dando um erro, a ultima imagem ele não mostra a ultima imagem do banco de dados fica oculta abaixo de todas como resolvo isso será ? obrigado
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Erro com array de imagens

16-06-2016 16:58

Você tem que fazer a alteração que indiquei e olhar o resultado pelo código-fonte do navegador.
Ai você vai observar o que o while está montando e compara esse código com o modelo da galeria.

Já se a última imagem da galeria não aparece pode ser um LIMIT no na consulta. Tem que fazer a consulta só e ver se todas as linhas estão sendo mostradas.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Erro com array de imagens

16-06-2016 17:35

Consultar no bd está consultando todas as imagens, mas a ultima imagem quebra e vai pra linha de baixo no css e fica oculta
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Erro com array de imagens

16-06-2016 20:07

Não é o tamanho da imagem? Na galeria o script pode estar configurado para determinado width, e sua imagem pode ser de width maior.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Erro com array de imagens

28-06-2016 21:29

Consegui consertar tudo no script, só não consegui fazer com que as imagens façam um slide, tentei de varias formas, com funções, com animate no proprio css, com animate nas funções do javascript, o script diz que para imagem roletar você precisa adicionar um por exemplo
duration:1000;

mas em qual lugar eu colocaria este duration ? obrigado
plugin que estou usando é este
http://gsgd.co.uk/sandbox/jquery/easing/
<script type="text/javascript" src="../assets/js/jquery_easing1.3.js"></script> <style type="text/css"> <!-- @import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light); html,body{height:auto;} *{outline:none;} body{margin:0px; padding:0px; background:#000;} #toolbar{position:absolute; z-index:3; bottom:10px; padding:5px; background:url(roletagem/fs_img_g_bg.png);} #toolbar img{border:none;} #img_title{position:absolute; z-index:3; left:10px; top:10px; padding:10px; background:url(roletagem/fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;} #bg{ z-index:1; overflow:hidden; left:10px; top:10px; width:100%; height:auto;} #bgimg{display:none; -ms-interpolation-mode: bicubic;} #preloader{position:relative; z-index:3; width:32px; padding:20px; top:80px; margin:auto; background:#000;} #thumbnails_wrapper{z-index:2; position:absolute; bottom:150px; width:100%; background:url(roletagem/empty.gif); /* stupid ie needs a background value to understand hover area */} #outer_container{position:relative; padding:0; width:100%;} #outer_container .thumbScroller{position:relative; overflow:hidden; background:url(roletagem/fs_img_g_bg.png);} #outer_container .thumbScroller, #outer_container .thumbScroller .containerSlide, #outer_container .thumbScroller .content{height:170px;} #outer_container .thumbScroller .containerSlide{position:relative; left:0;} #outer_container .thumbScroller .content{float:left;} #outer_container .thumbScroller .content div{margin:5px; height:100%;} #outer_container .thumbScroller img{border:5px solid #fff; height:150px; width:200px;} #outer_container .thumbScroller .content div a{display:block; padding:5px;} .nextImageBtn, .prevImageBtn{display:block; position:absolute; width:50px; height:50px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;} .nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;} .nextImageBtn{right:0; background:#000 url(roletagem/nextImgBtn.png) center center no-repeat;} .prevImageBtn{background:#000 url(roletagem/prevImgBtn.png) center center no-repeat;} --> </style> <?php $slide = new Slide(); $slide->getImagens(); ?> <?php if (isset($slide->db->data)): ?> <div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="assets/images/slide/<?= $slide->slide_imagem ?>" width="1680" height="800" alt="<?= $slide->slide_nome ?>" title="<?= $slide->slide_nome ?>" id="bgimg" /></div> <div id="preloader"><img src="roletagem/ajax-loader_dark.gif" width="32" height="32" /></div> <div id="img_title"></div> <div id="toolbar"></div> <div id="thumbnails_wrapper"> <div id="outer_container"> <div class="thumbScroller"> <div class="containerSlide"> <?php foreach ($slide->db->data as $images): ?> <div class="content"> <div><a href="assets/images/slide/<?= $images->slide_imagem ?>"><img src="assets/images/slide/<?= $images->slide_imagem ?>" title="<?= $images->slide_nome ?>" alt="<?= $images->slide_nome ?>" /></a> </div> </div> <?php endforeach ?> </div> </div> </div> </div> <?php endif ?> <script> //config //set default images view mode $defaultViewMode="full"; //full, normal, original $tsMargin=30; //first and last thumbnail margin (for better cursor interaction) $scrollEasing=600; //scroll easing amount (0 for no easing) $scrollEasingType="easeOutCirc"; //scroll easing type $thumbnailsContainerOpacity=0.8; //thumbnails area default opacity $thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out $thumbnailsOpacity=0.6; //thumbnails default opacity $nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show") $keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off") //cache vars $thumbnails_wrapper=$("#thumbnails_wrapper"); $outer_container=$("#outer_container"); $thumbScroller=$(".thumbScroller"); $thumbScroller_container=$(".thumbScroller .containerSlide"); $thumbScroller_content=$(".thumbScroller .content"); $thumbScroller_thumb=$(".thumbScroller .thumb"); $preloader=$("#preloader"); $toolbar=$("#toolbar"); $toolbar_a=$("#toolbar a"); $bgimg=$("#bgimg"); $img_title=$("#img_title"); $nextImageBtn=$(".nextImageBtn"); $prevImageBtn=$(".prevImageBtn"); $(window).load(function() { $toolbar.data("imageViewMode",$defaultViewMode); //default view mode if($defaultViewMode=="full"){ $toolbar_a.html("<img src='roletagem/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore"); } else { $toolbar_a.html("<img src='roletagem/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize"); } ShowHideNextPrev($nextPrevBtnsInitState); //thumbnail scroller $thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin sliderLeft=$thumbScroller_container.position().left; sliderWidth=$outer_container.width(); $thumbScroller.css("width",sliderWidth); var totalContent=0; fadeSpeed=200; var $the_outer_container=document.getElementById("outer_container"); var $placement=findPos($the_outer_container); $thumbScroller_content.each(function () { var $this=$(this); totalContent+=$this.innerWidth(); $thumbScroller_container.css("width",totalContent); $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity); }); $thumbScroller.mousemove(function(e){ if($thumbScroller_container.width()>sliderWidth){ var mouseCoords=(e.pageX - $placement[1]); var mousePercentX=mouseCoords/sliderWidth; var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX)); var thePosA=mouseCoords-destX; var thePosB=destX-mouseCoords; if(mouseCoords>destX){ $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing } else if(mouseCoords<destX){ $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing } else { $thumbScroller_container.stop(); } } }); $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity); $thumbnails_wrapper.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo("slow", 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); } ); $thumbScroller_thumb.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo(fadeSpeed, 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity); } ); //on window resize scale image and reset thumbnail scroller $(window).resize(function() { FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH")); $thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); var newWidth=$outer_container.width(); $thumbScroller.css("width",newWidth); sliderWidth=newWidth; $placement=findPos($the_outer_container); }); //load 1st image var the1stImg = new Image(); the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload); the1stImg.src = $bgimg.attr("src"); $outer_container.data("nextImage",$(".content").first().next().find("a").attr("href")); $outer_container.data("prevImage",$(".content").last().find("a").attr("href")); }); function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){ $this.fadeOut("fast",function(){ $this.attr("src", "").attr("src", imgSrc); //change image source FullScreenBackground($this,imageWidth,imageHeight); //scale background image $preloader.fadeOut("fast",function(){$this.fadeIn("slow");}); var imageTitle=$img_title.data("imageTitle"); if(imageTitle){ $this.attr("alt", imageTitle).attr("title", imageTitle); $img_title.fadeOut("fast",function(){ $img_title.html(imageTitle).fadeIn(); }); } else { $img_title.fadeOut("fast",function(){ $img_title.html($this.attr("title")).fadeIn(); }); } }); } //mouseover toolbar if($toolbar.css("display")!="none"){ $toolbar.fadeTo("fast", 0.4); } $toolbar.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo("fast", 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo("fast", 0.4); } ); //Clicking on thumbnail changes the background image $("#outer_container a").click(function(event){ event.preventDefault(); var $this=$(this); GetNextPrevImages($this); GetImageTitle($this); SwitchImage(this); ShowHideNextPrev("show"); }); //next/prev images buttons $nextImageBtn.click(function(event){ event.preventDefault(); SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); }); $prevImageBtn.click(function(event){ event.preventDefault(); SwitchImage($outer_container.data("prevImage")); var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); }); //next/prev images keyboard arrows if($keyboardNavigation=="on"){ $(document).keydown(function(ev) { if(ev.keyCode == 39) { //right arrow SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); return false; // don't execute the default action (scrolling or whatever) } else if(ev.keyCode == 37) { //left arrow SwitchImage($outer_container.data("prevImage")); var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); return false; // don't execute the default action (scrolling or whatever) } }); } function ShowHideNextPrev(state){ if(state=="hide"){ $nextImageBtn.fadeOut(); $prevImageBtn.fadeOut(); } else { $nextImageBtn.fadeIn(); $prevImageBtn.fadeIn(); } } //get image title function GetImageTitle(elem){ var title_attr=elem.children("img").attr("title"); //get image title attribute $img_title.data("imageTitle", title_attr); //store image title } //get next/prev images function GetNextPrevImages(curr){ var nextImage=curr.parents(".content").next().find("a").attr("href"); if(nextImage==null){ //if last image, next is first var nextImage=$(".content").first().find("a").attr("href"); } $outer_container.data("nextImage",nextImage); var prevImage=curr.parents(".content").prev().find("a").attr("href"); if(prevImage==null){ //if first image, previous is last var prevImage=$(".content").last().find("a").attr("href"); } $outer_container.data("prevImage",prevImage); } //switch image function SwitchImage(img){ $preloader.fadeIn("fast"); //show preloader var theNewImg = new Image(); theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload); theNewImg.src = img; } //get new image dimensions function CreateDelegate(contextObject, delegateMethod){ return function(){ return delegateMethod.apply(contextObject, arguments); } } //new image on load function theNewImg_onload(){ $bgimg.data("newImageW",this.width).data("newImageH",this.height); BackgroundLoad($bgimg,this.width,this.height,this.src); } //Image scale function function FullScreenBackground(theItem,imageWidth,imageHeight){ var winWidth=$(window).width(); var winHeight=$(window).height(); if($toolbar.data("imageViewMode")!="original"){ //scale var picHeight = imageHeight / imageWidth; var picWidth = imageWidth / imageHeight; if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode if ((winHeight / winWidth) < picHeight) { $(theItem).attr("width",winWidth); $(theItem).attr("height",picHeight*winWidth); } else { $(theItem).attr("height",winHeight); $(theItem).attr("width",picWidth*winHeight); }; } else { //normal size image mode if ((winHeight / winWidth) > picHeight) { $(theItem).attr("width",winWidth); $(theItem).attr("height",picHeight*winWidth); } else { $(theItem).attr("height",winHeight); $(theItem).attr("width",picWidth*winHeight); }; } $(theItem).css("margin-left",(winWidth-$(theItem).width())/2); $(theItem).css("margin-top",(winHeight-$(theItem).height())/2); } else { //no scale $(theItem).attr("width",imageWidth); $(theItem).attr("height",imageHeight); $(theItem).css("margin-left",(winWidth-imageWidth)/2); $(theItem).css("margin-top",(winHeight-imageHeight)/2); } } //Image view mode function - fullscreen or normal size function ImageViewMode(theMode){ $toolbar.data("imageViewMode", theMode); FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH")); if(theMode=="full"){ $toolbar_a.html("<img src='roletagem/toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore"); } else { $toolbar_a.html("<img src='roletagem/toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize"); } } //function to find element Position function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft curtop = obj.offsetTop while (obj = obj.offsetParent) { curleft += obj.offsetLeft curtop += obj.offsetTop } } return [curtop, curleft]; } </script>

obrigado
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Erro com array de imagens

28-06-2016 23:28

Tem um exemplo nesse link de uso do duration

$(element).slideUp(1000, method, callback}); $(element).slideUp({ duration: 1000, easing: method, complete: callback});

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Erro com array de imagens

28-06-2016 23:29

O que eu não estou entendo como irei integrar esses comandos com o meu código, já tentei de tudo e não consegui, tem alguma dica ? obrigado

se quiser dar uma olhada o exemplo do script em html é esse

http://manos.malihu.gr/tuts/malihu-jquery-image-gallery/malihu-jquery-image-gallery.html

Download do html

http://manos.malihu.gr/tuts/malihu-jquery-image-gallery/malihu-jquery-image-gallery.zip

obrigaado
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Erro com array de imagens

28-06-2016 23:37

Não entendi a ideia do uso do script de clicar na div com o de galeria.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 448

Re: Erro com array de imagens

28-06-2016 23:39

Na verdade está tudo pronto, a unica coisa que não está fazendo é as fotos girando, só falta somente isso o resto consegui resolver tudo, obrigado
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Erro com array de imagens

29-06-2016 00:00

Esse link que você passou http://gsgd.co.uk/sandbox/jquery/easing/ pelo que vi é um efeito de mover a div.

Esse efeito que você falou não conheço. Se quiser dar uma olhada veja essas galerias http://www.webdesignerdepot.com/2011/08 ... w-plugins/
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado