What's new
Symbianize Forum

Most of our features and services are available only to members, so we encourage you to login or register a new account. Registration is free, fast and simple. You only need to provide a valid email. Being a member you'll gain access to all member forums and features, post a message to ask question or provide answer, and share or find resources related to mobile phones, tablets, computers, game consoles, and multimedia.

All that and more, so what are you waiting for, click the register button and join us now! Ito ang website na ginawa ng pinoy para sa pinoy!

PHP - MYSQL Slideshow Images help! help! help

eugcar

eugcar

The Saint
Advanced Member
Messages
880
Reaction score
0
Points
26
Pa help po! ito po yung nagiging result po ng code ko po..
View attachment 206754View attachment 206755

bali ang gus2 ko po mangyari.

_______________________________________
| | | | | |
| image 5 | image 4 | image 3 | image 2 | image 1 | <--- Thumb image "mouseoverl"
|_______|_______|_______|_______|_______|
| |
| Main image 1-5 |
| |
| |
| |
|_____________________________________ |

but ito po ang nangyayari.

_______________________________________
| | | | | |
| image 1 | image 1 | image 1 | image 1 | image 1 | <--- Thumb image "mouseoverl"
|_______|_______|_______|_______|_______|
| |
| Main image 1-1 |
| |
| |
| |
|_____________________________________ |

_______________________________________
| | | | | |
| image 2 | image 2 | image 2 | image 2 | image 2 |
|_______|_______|_______|_______|_______|
| |
| Main image 2-2 |
| |
| |
| |
|_____________________________________ |

_______________________________________
| | | | | |
| image 3 | image 3 | image 3 | image 3 | image 3 |
|_______|_______|_______|_______|_______|
| |
| Main image 3-3 |
| |
| |
| |
|_____________________________________ |

_______________________________________
| | | | | |
| image 4 | image 4 | image 4 | image 4 | image 4 |
|_______|_______|_______|_______|_______|
| |
| Main image 4-4 |
| |
| |
| |
|_____________________________________ |

_______________________________________
| | | | | |
| image 5 | image 5 | image 5 | image 5 | image 5 |
|_______|_______|_______|_______|_______|
| |
| Main image 5-5 |
| |
| |
| |
|_____________________________________ |

- - - Updated - - -

<!-- slider-img.php start code -->

<!-- Slider CSS and JS Script -->
<style>
#slider {
height: 480px;
overflow: hidden;
position: relative;
width: 663px;
}
#slider ul#images {list-style-type: none; margin: 0px; padding: 0px; top: 0px; position: absolute; width: 3315px;}
#slider ul#images li {width: 663px; height: 480px; margin: 0px; padding: 0px; float: left;}
#slider ul#images li a {display: block; height: 480px; text-indent: -9999px;}
div#thumb {
left: 0;
padding-top: 1px;
width: 663px;
z-index: 1000;
}

div#thumb div {
float: right;
height: 50px;
margin: 2px 2.2px 4px;
opacity: 0.2;
text-indent: -9999px;
width: 128px;
}
.hoverclass {opacity: 100 !important;}
</style>

<script type="text/javascript" src="js/slide/fade.js"></script>
<script type="text/javascript" src="js/slide/jjquery.tooltip.js"></script>
<script type="text/javascript" src="js/slide/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="js/slide/scrolled.js"></script>
<script type="text/javascript" src="js/slide/show_hide.js"></script>

<?php
include_once('mySQLconnect.php');


$qry = "SELECT imgPhoto, imgThumb FROM images WHERE imgFolder LIKE '%Monitor Cables%' LIMIT 5";
$result = mysql_query($qry);
$num = mysql_num_rows($result);

if($num > 0)
{

while($row = mysql_fetch_assoc($result))
{
$id = $row['id'];
$imagePhoto = $row['imgPhoto'];
$imageThumb = $row['imgThumb'];


echo" <div id=\"thumb\">";

$w=1;
$x=1;
for($m=0; $m<5; $m++)
{

echo "
<div class=\"slider_thumb\" id=\"slider_thumb_".$w++."\"
style=\"background: url('".$imageThumb."') no-repeat\">".$x++."</div>
";
}

echo "</div>";


echo "<div id=\"slider\">";
echo "<ul id=\"images\">";
$y=1;
$z=1;
for($n=0; $n<5; $n++)
{
echo "
<li id=\"slider_li_".$y++."\"
style=\"background: url('".$imagePhoto."') no-repeat\"><a href=\"#\">".$z++."</a></li>
";
}
echo "</ul>";

echo "
</div>
";
}
}
?>

<!-- slider-img.php end code -->

<!-- fade.js start code -->

// JavaScript Document

$(document).ready(function(){
$("#lightsOff").click(function () {
//fade in the semi-transparent background, fade out the lights OFF button and fade in the lights ON button
$("div#lb-bg").css({opacity: 0, display: "block"}).animate({opacity: 0.8},500); //500 is the speed... feel free to change this
$("#lightsOff").fadeOut(500);
$("#lightsOn").fadeIn(500);
//this stops the link from going to where the href tag tells it to
return false;
});

//same as above but for turning the lights back on again
$("#lightsOn").click(function () {
$("div#lb-bg").fadeOut(500);
$("#lightsOn").fadeOut(500);
$("#lightsOff").fadeIn(500);
return false;
});

$('.hide-ad').click(function() {
$(this).parent().hide();
});
});

<!-- fade.js end code -->

<!-- scrolled.js start code -->
// JavaScript Document

var counter = 1;
var timer = 0;
var items = 5;
//var items = 5;
jQuery(document).ready(function(){


scrollup();
jQuery(".slider_thumb").mouseenter(function(){

clearTimeout(timer);
var margin = parseInt(jQuery(this).html() - 1);
if(margin > 0)
margin = margin - (margin * 2);

var newloc = (margin * 663);
counter = parseInt(jQuery(this).html());
jQuery(".hoverclass").removeClass("hoverclass");
jQuery("#slider_thumb_"+counter).addClass("hoverclass");
jQuery("ul#images").stop().animate({"left": newloc + "px"}, 400, "swing");

});
jQuery(".slider_thumb").mouseleave(function(){
timer = setTimeout("scrollup()", 5000);

});
});

function scrollup() {

if(counter == 5) {
counter = 1;
jQuery(".hoverclass").removeClass("hoverclass");
jQuery("#slider_thumb_"+counter).addClass("hoverclass");
jQuery("ul#images").stop().animate({opacity: 0.2},200).animate({"left": "0px"}, 400, "swing").animate({opacity: 1},200);

} else {

counter++;
jQuery(".hoverclass").removeClass("hoverclass");
jQuery("#slider_thumb_"+counter).addClass("hoverclass");
jQuery("ul#images").stop().animate({opacity: 0.2},200).animate({"left": "-=663px"}, 400, "swing").animate({opacity: 1},200);

}
timer = setTimeout("scrollup()", 6000);
}
<!-- scrolled.js end code -->

<!-- show_hide.js start code -->

// JavaScript Document

function showdiv(str)
{

if (str=='one')
{
document.getElementById('one').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='two')
{
document.getElementById('two').style.display='block';
document.getElementById('one').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='three')
{
document.getElementById('three').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('one').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='four')
{
document.getElementById('four').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('one').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}

if (str=='five')
{
document.getElementById('five').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('one').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='six')
{
document.getElementById('six').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('one').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='seven')
{
document.getElementById('seven').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('one').style.display='none';
}

}
// For Auto Hide The Div...
function hide_div()
{

document.getElementById('one').style.display='none';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';

}
var int=self.setInterval("hide_div()",90000000);

<!-- show_hide.js end code -->
 

Attachments

  • pcteksoul1.jpg
    pcteksoul1.jpg
    188.2 KB · Views: 32
  • pcteksoul2.jpg
    pcteksoul2.jpg
    131.4 KB · Views: 23
Last edited:
up up up..

- - - Updated - - -

up! up! up!
 
eugcar said:
Pa help po! ito po yung nagiging result po ng code ko po..
View attachment 1013719View attachment 1013720

bali ang gus2 ko po mangyari.

_______________________________________
| | | | | |
| image 5 | image 4 | image 3 | image 2 | image 1 | <--- Thumb image "mouseoverl"
|_______|_______|_______|_______|_______|
| |
| Main image 1-5 |
| |
| |
| |
|_____________________________________ |

but ito po ang nangyayari.

_______________________________________
| | | | | |
| image 1 | image 1 | image 1 | image 1 | image 1 | <--- Thumb image "mouseoverl"
|_______|_______|_______|_______|_______|
| |
| Main image 1-1 |
| |
| |
| |
|_____________________________________ |

_______________________________________
| | | | | |
| image 2 | image 2 | image 2 | image 2 | image 2 |
|_______|_______|_______|_______|_______|
| |
| Main image 2-2 |
| |
| |
| |
|_____________________________________ |

_______________________________________
| | | | | |
| image 3 | image 3 | image 3 | image 3 | image 3 |
|_______|_______|_______|_______|_______|
| |
| Main image 3-3 |
| |
| |
| |
|_____________________________________ |

_______________________________________
| | | | | |
| image 4 | image 4 | image 4 | image 4 | image 4 |
|_______|_______|_______|_______|_______|
| |
| Main image 4-4 |
| |
| |
| |
|_____________________________________ |

_______________________________________
| | | | | |
| image 5 | image 5 | image 5 | image 5 | image 5 |
|_______|_______|_______|_______|_______|
| |
| Main image 5-5 |
| |
| |
| |
|_____________________________________ |

- - - Updated - - -

<!-- slider-img.php start code -->

<!-- Slider CSS and JS Script -->
<style>
#slider {
height: 480px;
overflow: hidden;
position: relative;
width: 663px;
}
#slider ul#images {list-style-type: none; margin: 0px; padding: 0px; top: 0px; position: absolute; width: 3315px;}
#slider ul#images li {width: 663px; height: 480px; margin: 0px; padding: 0px; float: left;}
#slider ul#images li a {display: block; height: 480px; text-indent: -9999px;}
div#thumb {
left: 0;
padding-top: 1px;
width: 663px;
z-index: 1000;
}

div#thumb div {
float: right;
height: 50px;
margin: 2px 2.2px 4px;
opacity: 0.2;
text-indent: -9999px;
width: 128px;
}
.hoverclass {opacity: 100 !important;}
</style>

<script type="text/javascript" src="js/slide/fade.js"></script>
<script type="text/javascript" src="js/slide/jjquery.tooltip.js"></script>
<script type="text/javascript" src="js/slide/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="js/slide/scrolled.js"></script>
<script type="text/javascript" src="js/slide/show_hide.js"></script>

<?php
include_once('mySQLconnect.php');


$qry = "SELECT imgPhoto, imgThumb FROM images WHERE imgFolder LIKE '%Monitor Cables%' LIMIT 5";
$result = mysql_query($qry);
$num = mysql_num_rows($result);

if($num > 0)
{

while($row = mysql_fetch_assoc($result))
{
$id = $row['id'];
$imagePhoto = $row['imgPhoto'];
$imageThumb = $row['imgThumb'];


echo" <div id=\"thumb\">";

$w=1;
$x=1;
for($m=0; $m<5; $m++)
{

echo "
<div class=\"slider_thumb\" id=\"slider_thumb_".$w++."\"
style=\"background: url('".$imageThumb."') no-repeat\">".$x++."</div>
";
}

echo "</div>";


echo "<div id=\"slider\">";
echo "<ul id=\"images\">";
$y=1;
$z=1;
for($n=0; $n<5; $n++)
{
echo "
<li id=\"slider_li_".$y++."\"
style=\"background: url('".$imagePhoto."') no-repeat\"><a href=\"#\">".$z++."</a></li>
";
}
echo "</ul>";

echo "
</div>
";
}
}
?>

<!-- slider-img.php end code -->

<!-- fade.js start code -->

// JavaScript Document

$(document).ready(function(){
$("#lightsOff").click(function () {
//fade in the semi-transparent background, fade out the lights OFF button and fade in the lights ON button
$("div#lb-bg").css({opacity: 0, display: "block"}).animate({opacity: 0.8},500); //500 is the speed... feel free to change this
$("#lightsOff").fadeOut(500);
$("#lightsOn").fadeIn(500);
//this stops the link from going to where the href tag tells it to
return false;
});

//same as above but for turning the lights back on again
$("#lightsOn").click(function () {
$("div#lb-bg").fadeOut(500);
$("#lightsOn").fadeOut(500);
$("#lightsOff").fadeIn(500);
return false;
});

$('.hide-ad').click(function() {
$(this).parent().hide();
});
});

<!-- fade.js end code -->

<!-- scrolled.js start code -->
// JavaScript Document

var counter = 1;
var timer = 0;
var items = 5;
//var items = 5;
jQuery(document).ready(function(){


scrollup();
jQuery(".slider_thumb").mouseenter(function(){

clearTimeout(timer);
var margin = parseInt(jQuery(this).html() - 1);
if(margin > 0)
margin = margin - (margin * 2);

var newloc = (margin * 663);
counter = parseInt(jQuery(this).html());
jQuery(".hoverclass").removeClass("hoverclass");
jQuery("#slider_thumb_"+counter).addClass("hoverclass");
jQuery("ul#images").stop().animate({"left": newloc + "px"}, 400, "swing");

});
jQuery(".slider_thumb").mouseleave(function(){
timer = setTimeout("scrollup()", 5000);

});
});

function scrollup() {

if(counter == 5) {
counter = 1;
jQuery(".hoverclass").removeClass("hoverclass");
jQuery("#slider_thumb_"+counter).addClass("hoverclass");
jQuery("ul#images").stop().animate({opacity: 0.2},200).animate({"left": "0px"}, 400, "swing").animate({opacity: 1},200);

} else {

counter++;
jQuery(".hoverclass").removeClass("hoverclass");
jQuery("#slider_thumb_"+counter).addClass("hoverclass");
jQuery("ul#images").stop().animate({opacity: 0.2},200).animate({"left": "-=663px"}, 400, "swing").animate({opacity: 1},200);

}
timer = setTimeout("scrollup()", 6000);
}
<!-- scrolled.js end code -->

<!-- show_hide.js start code -->

// JavaScript Document

function showdiv(str)
{

if (str=='one')
{
document.getElementById('one').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='two')
{
document.getElementById('two').style.display='block';
document.getElementById('one').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='three')
{
document.getElementById('three').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('one').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='four')
{
document.getElementById('four').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('one').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}

if (str=='five')
{
document.getElementById('five').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('one').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='six')
{
document.getElementById('six').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('one').style.display='none';
document.getElementById('seven').style.display='none';
}
if (str=='seven')
{
document.getElementById('seven').style.display='block';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('one').style.display='none';
}

}
// For Auto Hide The Div...
function hide_div()
{

document.getElementById('one').style.display='none';
document.getElementById('two').style.display='none';
document.getElementById('three').style.display='none';
document.getElementById('four').style.display='none';
document.getElementById('five').style.display='none';
document.getElementById('six').style.display='none';
document.getElementById('seven').style.display='none';

}
var int=self.setInterval("hide_div()",90000000);

<!-- show_hide.js end code -->
Click to expand...


Ilabas mo sa loop yung main div mo sir, ilagay mo lang yung thumbnail.
 
try mo to


<?php
/* function para sa pagkuha ng path ng images at ilalagay sa array */
function getImagesFromDir($path) {
$images = array();
if ( $img_dir = @opendir($path) ) {
while ( false !== ($img_file = readdir($img_dir)) ) {
if ( preg_match("/(\.gif|\.jpg|\.png)$/", $img_file) ) {
$images[] = $img_file;
}
}
closedir($img_dir);
}
return $images;
}

$root = '';
$path = 'upload/'; /* upload ang name ng folder kung saan ung images */

tpos gawa ka ng loop na kukuha ng path ng image sa array..
$img=($root . $path . $img[ctr]);
 
You must log in or register to reply here.

Similar threads

C
Please help PHP not inserting in the database
Replies
4
Views
441
jskhulitz
J
X
(Help) PHP fail "Search" Code
Replies
1
Views
554
jhefreyzz
J
N
Ok lang ba ung ganitong script?
Replies
3
Views
326
nice30
N
ScreamAimsFire
Mga sir Help naman po sa slider ko ayaw ma mobile view :(
Replies
4
Views
424
ScreamAimsFire
ScreamAimsFire
TheTruth07
Help dito sa PHP and CSS template
Replies
6
Views
814
bentesn1per
B
Back
Top Bottom