Hi I currently have a jquery image slider script that pulls images from a folder and shows them on a page.
Here is the webpage with the working image slider: http://iseeit.no/slidertest/
What I want and have been trying to figure out is to have 9 individual sliders on the same page, here is an example picture that shows how it should look like:
each of the grey boxes represents the sliders
Now I've been trying to make a new div for each slides, but I can't figure out how to do it...
Here is the index.php script:
Slideshow
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fit: 1, pause: 2, timeout: 100
});
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />
</head>
<body>
<?php
$directory = 'images/slideshow';
try {
// Styling for images
echo "<div id=\"myslides\">";
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = $directory . "/" . $item;
echo "<img src=\"" . $path . "\" />";
}
}
echo "</div>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
</body>
</html>
Here is the CSS coding:
#myslides {
padding: -8px;
margin: -8px;
}
#myslides img {
}
So I was wondering how I would do this? I've tried to make a new div but I don't hvae so much experience with php, so I don't think I'm doing it right...
Would love to get some feedback and some help with this.
Here is all the files that has to do with the script:
http://iseeit.no/files/slidertest.rar
If I get your question right, then you have one working slider and want more of them on one page next to each other. If so then you can do it like so:
PHP:
// set the directories of the sliders you want
$directories = array('images/slideshow',
'images/slideshow2',
'images/slideshow3',
'images/slideshow4',
'images/slideshow5');
//create all the image sliders
foreach($directories as $dir) {
try {
echo '<div class="myslides">';
//add slides
foreach( new DirectoryIterator($dir) as $item ) {
if ($item->isFile()) {
echo '<img src="' . $dir . '/' . $item. '" />';
}
}
echo '</div>';
} catch(Exception $e) {
//do nothing, just skip the slider
}
}
And set the jQuery plugin for the slider on the class myslides like so:
<script>
$(document).ready(function() {
$('.myslides').cycle({
fit: 1, pause: 2, timeout: 100
});
});
</script>
You can use floats to place the sliders next to each other. Best practice would be an ul with the sliders as an li. But i left it as an div for now. You can get them next to each other with this CSS:
.myslides {
float: left;
margin: 0 10px 10px 0; //top, right, bottom, left
width: 200px; //set the width and height of the sliders (or maybe the slider is doing it?)
height: 400px;
}
Hope this helps!
update: example code to create 3x3
$directories = array(0, 1, 2, 3, 3, 4, 5, 5, 6, 6, 7, 7);
$i = 0;
echo '<ul>';
foreach($directories as $dir) {
// devide $i by 3, is the outcome 0?
if($i % 3 == 0 && $i != 0) {
//end row
echo '</li>';
//are there more items for the next row?
if($i != count($directories)) {
echo '<li>';
}
} elseif($i == 0) {
echo '<li>';
}
// your code
echo 'Jeah!';
$i++; //add one
}
//close last element and list
echo '</li></ul>';
Output:
<ul>
<li>Jeah!Jeah!Jeah!</li>
<li>Jeah!Jeah!Jeah!</li>
<li>Jeah!Jeah!Jeah!</li>
<li>Jeah!Jeah!Jeah!</li>
</ul>
Related
I'm using a template for a doll-maker for my website, where the images from one <div> are able to be dragged onto another <div>s blank area to dress something up.
I have tried to set the image containing <div> to overflow: scroll instead of the default overflow: visible but the images get cut off when scroll is used.
appendTo: body and helper: clone have not worked.
Any help would be very much appreciated please :)
HTML/PHP:
<div id="dollmaker_container">
<div id="bodyArea" class="ui-corner-all">
<img class="skintone" src="base/full/Base_Original_copy.png" alt="BaseBody" width="200" height="200">
</div>
<div id="swatchesArea" class="ui-corner-all">
<h3>Base:</h3>
<?php
/*Display the clickable thumbnails for the base variations (code for changing base is in JavaScript)*/
$images = scandir("base/thumbnails");
$ignore = Array(".", "..", ".htaccess", ".DS_Store");
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<img src=\"base/thumbnails/".$curimg."\" alt=\"swatch\">";
}
};
?>
</div>
<div id="piecesArea">
<?php
$folders = scandir("images/");
$ignore = Array(".", "..", ".htaccess", "BaseBody.gif", "title.png", ".DS_Store");
/*Display the tabs according to folder names*/
echo "<ul id=\"tabsbar\">";
foreach($folders as $key => $curfol){
if(!in_array($curfol, $ignore)) {
$curfol=ltrim($curfol,'1234567890');
$key = $key-1;
echo "<li>".$curfol."</li>\n";
}
};
echo "</ul>";
/*For each tab, display the props*/
foreach($folders as $key => $curfol){
if(!in_array($curfol, $ignore)) {
$key = $key-1;
echo "<div id=\"tabs-".$key."\">\n";
$images = scandir("images/".$curfol);
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<img alt=\"\" src=\"images/".$curfol."/".$curimg."\">";
}
};
echo "</div>\n";
}
};
?>
</div>
JS
$(document).ready(function() {
//Makes the pieces draggable & sets options
$("#piecesArea > div > img").draggable({
//Makes it so that the pieces' z-index can be reordered
stack: { group: '#piecesArea > div > img', min: 500,scroll: false },
distance: 0
});
//Sets what happens when you release a piece
$("#bodyArea").droppable({
drop: function(event, ui){
//this is so that the element "sticks" even when tab is changed.
ui.draggable.addClass("draggedout");
},
//changes current tab to the tab the piece belongs to when dragged out of body area
out: function(event, ui){
ui.draggable.removeClass("draggedout");
var whichTab = ui.draggable.parent().attr("id");
$("#piecesArea").tabs('select' , whichTab);
}
});
//tabs
$("#piecesArea").tabs();
//changes the body when thumbnails are clicked
$("#swatchesArea a").click( function() {
var changeSrc = $(this).attr("href");
$("#bodyArea>img").attr("src", changeSrc);
return false;
});
});
I have implemented three star rating system based on popularity count in my website, but now my client wants to change colors of those three stars (default blue) to red, blue and green which shows the (degree of) popularity.
I've implemented this star rating system using CSS sprites, where I included two star images - golden and gray, in one sprite and displaying these using some logic. Works fine for one color, but how to implement three colours for each star?
HTML
<div class="star-box">
<li>
<span class="stars"><?php echo $position;?></span>
</li>
</div>
PHP
if( !isset($_SESSION['ranking']) || $_SESSION['ranking']['points'] <= 1000 ) {
if( !isset($_SESSION['ranking']['points']) || $_SESSION['ranking']['points'] == '' ) {
$position = '0px';
$position = 0.00;
} else {
$position = ($_SESSION['ranking']['points'] * 0.14).'px';
$position = 0.75;
}
$str1 = 'class="active" ';
$str1 .= ' style="background-position:'.$position.' 9px;"';
}
if( $_SESSION['ranking']['points'] > 1000 && $_SESSION['ranking']['points'] <= 5000 ) {
if( !isset($_SESSION['ranking']['points']) || $_SESSION['ranking']['points'] == '' ) {
$position = '0px';
$position = 0.00;
} else {
$position = ($_SESSION['ranking']['points']*0.035).'px';
$position = 1.40;
}
}
jQuery
$(function() {
$('span.stars').stars();
});
$.fn.stars = function() {
return $(this).each(function() {
// get the value
var val = parseFloat($(this).html());
// make sure that the value is in (0 - 5) range, multiply to get width
val = Math.round(val * 4) / 4;
var size = Math.max(0, (Math.min(5, val))) * 16;
// create stars holder
var $span = $('<span />').width(size);
// replace the numerical value with stars
$(this).html($span);
});
}
CSS
span.stars, span.stars span {
display: block;
background: url(../../images/stars.png) 0 -16px repeat-x;
width: 50px;
height: 20px;
text-indent: -9999px;
}
span.stars span {
background-position: 0 0;
}
SPRITE IMAGE :
You could use session variables etc to control your CSS directly by using a php/css file. You could set star color, sprite position, all based on logic.
Link to your css
<link rel='stylesheet' type='text/css' href='css/style.php' />
Your css/php document
<?php
header("Content-type: text/css; charset: UTF-8");
$CSSposition = $position;
?>
span.stars span {
background-position: <?php echo $CSSposition ?>;
}
Here's a link to php/css document tutorial click here
Check this tutorial on knockout they show how to do the star rating system which you can apply to your code http://learn.knockoutjs.com/#/?tutorial=custombindings
Never could have imagined that chrome would have been the browser giving me grief, but the slideshow for our new website does not function properly in some versions of Chrome.
The error occurs here:
"mainPicture.src = \''.$directory.$current_pic.'\'; setMarkerPos('.$i.')"
Claiming that I can't modify mainPicture, an id that doesn't exist.
Obviously, other browsers don't have a problem seeing this object.
All help is much appreciated!
.
You can find the page here.
Source code:
<?php
/********************************************************************
* GATHER IMAGES FROM IMAGE DIRECTORY *
********************************************************************/
// Define directory where images are stored
$directory = "../../images/slideshow/";
// Create blank array to store image names
$pic_array = array("");
$num_pics;
// Create number to define position of images in array
$counter = 0;
// Gather pictures from image directory
if(is_dir($directory))
{
// Open directory to view files
if($dh = opendir($directory))
{
// Continue while still files to view
while(($file = readdir($dh)) !== false)
{
// Stop if picture limit of 6 reached
if($counter == 6)
break;
// Gather if object found is file or directory
$file_check = filetype($directory.$file);
// If object is a file, add it to the slideshow
if ($file_check == "file")
{
$extension = substr($file, strpos($file, "."));
if ($extension == ".png" || $extension == ".jpg")
{
$pic_array[$counter] = $file;
$counter++;
}
}
}
}
}
// Determine number of pics gathered
$num_pics = count($pic_array);
?>
<html>
<head>
<link href="scripts/slideshow.css" rel="stylesheet" type="text/css">
<?php
/********************************************************************
* CONTROL BEHAVIORS OF SLIDESHOW *
********************************************************************/
?>
<!-- Begin script to control slideshow -->
<script type = "text/javascript">
var thumbTop = 450; // starting value of thumb.style.top (make sure multiple of increment)
var highestTop = 342; // highest point mask can be on screen ,-, (make sure multiple of increment)
var lowestTop = 450; // lowest point mask can be on screen ,_, (make sure multiple of increment)
var delay = 2; // speed in which slide up and down methods are called
var increment = 5; // value that thumbTop increments with each method call
var intervalUp; // interval for thumb upward movements
var intervalDown; // interval for thumb downward movements
function startThumbSlideUp()
{
window.clearInterval(intervalDown);
intervalUp = window.setInterval(thumbSlideUp,delay);
}
function startThumbSlideDown()
{
window.clearInterval(intervalUp);
intervalDown = window.setInterval(thumbSlideDown,delay);
}
function thumbSlideUp()
{
thumbTop -= increment;
if (thumbTop <= highestTop)
{
thumbTop = highestTop;
window.clearInterval(intervalUp);
}
else
thumbMask.style.top = thumbTop;
}
function thumbSlideDown()
{
// Added to fix issue where images would start from too large a height
if (thumbTop <= highestTop)
thumbTop = highestTop;
thumbTop += increment;
if (thumbTop >= lowestTop)
{
thumbTop = lowestTop;
window.clearInterval(intervalDown);
}
else
thumbMask.style.top = thumbTop;
}
// Move marker above image <pos>
function setMarkerPos(pos)
{
marker.style.left = 600 - (66 * (pos)) + 19;
}
</script>
</head>
<?php
/********************************************************************
* DISPLAY SLIDESHOW *
********************************************************************/
// Start body and make images unhighlightable
echo '<body onselectstart="return false" style="margin: 0px;">';
// Create base value to increment horizontal position of thumbnails
$curr_thumb_left = 595; // (ignore this comment) 660<width of image> - 66<width of thumb> - 10<space between side> // 660
// Create and display main (large) image and image thumbnails
echo '<div id="mask" onmouseout = "startThumbSlideDown()" onmouseover = "startThumbSlideUp();">
';
echo '<img src = "'.$directory.$pic_array[0].'" id = "mainPicture" height = "420" width = "660" style = "z-index: -1; position:absolute;"/>
';
echo '<div id="thumbMask" height="66" width="660" style="z-index: 1; top: 450px; position: absolute;">
';
echo '<img id="marker" src="images/marker.png" height="10" width="10" style="z-index: 2; top: 0px; position: absolute;" onload="setMarkerPos(0);"/>';
// Search through image array, then assign names to and display thumbnails
for ($i=0; $i < $num_pics; $i++)
{
// Point to pic in array
$current_pic = $pic_array[$i];
// Create and display image thumbnails
if ($current_pic !== "")
{
echo '<img src = "'.$directory.$current_pic.'" id = "thumb'.$i.'" height = "50" width = "50" style = "left:'.$curr_thumb_left.'px; top: 10px; border: 3px white solid; position: absolute;" onclick = "mainPicture.src = \''.$directory.$current_pic.'\'; setMarkerPos('.$i.')"/>
';
// Move left value to the left [50px width + (3px padding * 2 sides) + 10px space between = 66px]
$curr_thumb_left -= 66;
}
}
echo '</div>';
echo '</div>';
?>
</body>
</html>
Chrome doesn't make image elements available by just their "id" value; you have to use document.getElementById("mainPicture") to get a reference to the DOM element. That'll work in all browsers anyway, so it's safe to just code it that way.
You are attempting to alter the src of mainPicture as though it were a global variable:
mainPicture.src = '.....';
Try referencing mainPicture by its id instead:
document.getElementById('mainPicture').src = '......';
You're not actually setting what mainPicture is, other browsers must be guessing whereas Chrome is doing what it should. Change:
echo '<img src = "'.$directory.$current_pic.'" id = "thumb'.$i.'" height = "50" width = "50" style = "left:'.$curr_thumb_left.'px; top: 10px; border: 3px white solid; position: absolute;" onclick = "mainPicture.src = \''.$directory.$current_pic.'\'; setMarkerPos('.$i.')"/>
to
echo '<img src = "'.$directory.$current_pic.'" id = "thumb'.$i.'" height = "50" width = "50" style = "left:'.$curr_thumb_left.'px; top: 10px; border: 3px white solid; position: absolute;" onclick = "document.getElementById('mainPicture').src = \''.$directory.$current_pic.'\'; setMarkerPos('.$i.')"/>
I have a popup window code that I have used before in login forms. The code displays an in-page popup.
This is the code:
<?php
//In Page Popup Box with Faded Background by Jerry Low #crankberryblog.com
//Find other useful scripts at the Crankberry Blog
//SETTINGS
$fade_amount = 60; //In Percentage
$box_width = 400;
$box_background = 'FFFFFF'; //Hex Color
$box_border_width = 2;
$box_border_color = '999999'; //Hex Color
$close_box = 1; //Do You Want The Close Bar on Top 1 = Yes, 0 = No
$extension = ""; // Other Variables that maybe needed, page number etc.
//Begin Popup Box
$left_margin = ( 0 - ($box_width*0.5) );
$page_url = basename($_SERVER['PHP_SELF']);
if ($extension!="") $page_url .= '?' . $extension;
if (isset($_GET['popup'])) {
echo '<div class="popup" style="width:'.$box_width.'px; background: #'.$box_background.'; margin-left:'.$left_margin.'px;';
if ($box_border_width>1) echo ' border: '.$box_border_width.'px solid #'.$box_border_color.';';
echo '">';
//Close Box
if ($close_box===1) echo '<div class="popup_close">Close (x)</div>';
?>
<!–- START YOUR POPUP CONTENT HERE -–>
Popup content goes in here!
<!–- END OF YOUR POPUP CONTENT HERE -–>
<?php
echo '</div>
<div class="fade" onclick="location.replace(\''.$page_url.'\');" style="opacity: 0.'.$fade_amount.'; -moz-opacity: 0.'.$fade_amount.';filter: alpha(opacity: '.$fade_amount.');"></div>
<div class="fade_container">';
}
?>
Activated Box
This code contains a link that reloads the page with parameters/arguments to show the popup.
I want to update this code to make the popup appear/hide without
This is what I have done so far, yet the popup doesn`t show.
Now I want to update the code to work as follows.
<link rel=StyleSheet href="css/popup.css" type="text/css" media=screen></link>
<?php
//In Page Popup Box with Faded Background by Jerry Low #crankberryblog.com
//Find other useful scripts at the Crankberry Blog
//SETTINGS
$fade_amount = 60; //In Percentage
$box_width = 400;
$box_background = 'FFFFFF'; //Hex Color
$box_border_width = 2;
$box_border_color = '999999'; //Hex Color
$close_box = 1; //Do You Want The Close Bar on Top 1 = Yes, 0 = No
$extension = ""; // Other Variables that maybe needed, page number etc.
//Begin Popup Box
$left_margin = ( 0 - ($box_width*0.5) );
$page_url = basename($_SERVER['PHP_SELF']);
if ($extension!="") $page_url .= '?' . $extension;
{
echo '<div id="pop_up" class="popup" style="visibility:hidden; width:'.$box_width.'px; background: #'.$box_background.'; margin-left:'.$left_margin.'px;';
if ($box_border_width>1) echo ' border: '.$box_border_width.'px solid #'.$box_border_color.';';
echo '">';
//Close Box
if ($close_box===1) echo '<div class="popup_close"><a href="#" ChangeStatus()>Close (x)</a></div>';
?>
<!–- START YOUR POPUP CONTENT HERE -–>
Popup content goes in here!
<!–- END OF YOUR POPUP CONTENT HERE -–>
<?php
echo '</div>
<div id="fade_div" class="fade" onclick="location.replace(\''.$page_url.'\');" style="visibility:hidden; opacity: 0.'.$fade_amount.'; -moz-opacity: 0.'.$fade_amount.';filter: alpha(opacity: '.$fade_amount.');"></div>
<div class="fade_container">';
}
?>
Activated Box
<script>
function ChangeStatus()
{
div = document.getElementById('fade_div').style.visibility;
popup = document.getElementById('pop_up').style.visibility;
alert(popup);
if(popup == "hidden")
{
div = "visible";
popup = "visible";
}
else
{
div = "hidden";
popup = "hidden";
}
}
</script>
ignore the CSS files as it is working fine.
I guess the problem is with the JS. Can anyone help me?
change your javascript to this:
if(popup == "hidden")
{
document.getElementById('fade_div').style.visibility = "visible";
document.getElementById('pop_up').style.visibility = "visible";
}
and
else
{
document.getElementById('fade_div').style.visibility = "hidden"
document.getElementById('pop_up').style.visibility = "hidden";
}
how can i fetch data from mysql with php and display it in mutliple color....like
[gray]first post
[white]second post
[gray]third post
[white]forth post
i know mysql_fetch_array but how can i display data with multi color like above
You have to loop over your lines, knowing if you are on an "even" or "odd" line (at least, if you want two colors), which can be calculated using the modulo operator.
For instance, as a quick idea, the following code :
$arr = array(
'first',
'second',
'third',
'fourth',
);
$i = 0;
foreach ($arr as $line) {
$class = ($i%2 ? 'odd' : 'even');
echo '<div class="' . $class . '">' . htmlspecialchars($line) . '</div>' . "\n";
$i++;
}
Will give this HTML output :
<div class="even">first</div>
<div class="odd">second</div>
<div class="even">third</div>
<div class="odd">fourth</div>
And now, up to you to configure the two .odd and .even CSS classes to get the colors you want.
There are many ways to do this (most of them more sophisticated than this example) but you're seemingly looking for a simple solution.
for($c=true; false!==($row=mysql_fetch_array($result, MYSQL_ASSOC)); $c=!$c) {
$class = $c ? 'even':'odd';
echo '<div class="', $class, '">', $row['x'], '</div>', "\n";
}
$c ? 'even':'odd'; tests whether $c is true or false and the result is 'even' if it is true and 'odd' if it is false. I.e. $class is either 'even' or 'odd' depending on the value of $c.
The for-loop starts with $c=true (initialization part of the for-loop). At the end of each iteration of the loop $c=!$c is executed which flips $c from true->false or false->true, i.e. $c alternates between true and false.
You can also use javascript to let the client add the coloring as an enhancement.
E.g. using jquery:
<html>
<head>
<style type="text/css">
tr.even td { background-color: red; }
tr.odd td { background-color: blue; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#t1 tr:odd').addClass('even');
$('#t1 tr:even').addClass('odd');
});
</script>
</head>
<body>
<table id="t1">
<tr><td>a</td><td>A</td></tr>
<tr><td>b</td><td>B</td></tr>
<tr><td>c</td><td>C</td></tr>
<tr><td>d</td><td>D</td></tr>
<tr><td>e</td><td>E</td></tr>
</table>
</body>
</html>
Itay Moav's and Pascal MARTIN's examples work, but if you have a numeric array you can simplify the code slightly:
foreach ($rows as $i => $row){
$even_odd = ($i%2) ? 'even' : 'odd';
echo "<tr class='$even_odd'>......";
}
In the loop
$i=0;
foreach ($rows as $row){
echo '<tr class="color'.($i%2).'">.........';
$i++;
}
in the css
.color1{ background-color: white}
.color0{ background-color: silver}