|
PHP - Php Image Slider Help
I have an image slider i am trying to edit. Currently i can only make it display only 1 continuios line of images that disapears. What i am trying to get, is an overflow feature that allows the images to start a new line instead of only one line. here is the code.
PHP Code: (function($) { $.fn.loopedCarousel = function(options) { var defaults = { container: '.container', slides: '.slides', pagination: '.pagination', autoStart: 0, // Set to positive number for auto interval and interval time slidespeed: 300, // Speed of slide animation fadespeed: 300, // Speed of fade animation items: 6, // Items show padding: 26, // Padding between items showPagination: false, // Shows pagination links vertical: false }; this.each(function() { var obj = $(this); var o = $.extend(defaults, options); var i = o.items; var m = 0; var t = 1; var s = $(o.slides,obj).children().size(); var w = $(o.slides,obj).children().outerWidth()+o.padding; var h = $(o.slides,obj).children().outerHeight()+o.padding; var c = Math.ceil($(o.slides,obj).children().size()/i); var pd = o.padding/2; var p = 0; var u = false; var n = 0; var pt = 0; var os = i*c-s; var params = {}; if (o.vertical===true) { w = h; } if(o.showPagination){ var buttons = s/i; $(obj).append('<ul class="pagination">'); $(o.slides,obj).children().each(function(){ if (n<buttons) { $(o.pagination,obj).append('<li><a rel="'+(n+1)+'" href="#" >'+(n+1)+'</a></li>'); n = n+1; } else { n = 0; return false; } $(o.pagination+' li a:eq(0)',obj).parent().addClass('active'); }); } if (o.vertical===true) { $(o.container,obj).css({height:(w*i)}); $(o.slides,obj).css({height:(s*w)}); } else { $(o.container,obj).css({width:(w*i)}); $(o.slides,obj).css({width:(s*w)}); } $(o.slides,obj).children().each(function(){ if (o.vertical===true) { $(this).css({position:'absolute',top:p+pd,display:'block'}); } else { $(this).css({position:'absolute',left:p+pd,display:'block'}); } p=p+w; }); $(o.slides,obj).children().each(function(){ pt = pt+1; if (pt<i+1) { params[o.vertical ? 'top' : 'left'] = (-w*pt)+pd-(w*os); $(o.slides,obj).children(':eq('+(s-pt)+')').css(params); } if (pt===i+2) { pt = 0; return false; } }); $('.next',obj).click(function(){ if(u===false) { animate('next',true); if(o.autoStart){clearInterval(sliderIntervalID);} } return false; }); $('.previous',obj).click(function(){ if(u===false) { animate('prev',true); if(o.autoStart){clearInterval(sliderIntervalID);} } return false; }); $(o.pagination+' li a',obj).click(function(){ if ($(this).parent().hasClass('active')) {return false;} else { t = $(this).attr('rel'); $(o.pagination+' li a',obj).parent().siblings().removeClass('active'); $(this).parent().addClass('active'); animate('fade',t); if(o.autoStart){clearInterval(sliderIntervalID);} } return false; }); if (o.autoStart) { sliderIntervalID = setInterval(function(){ if(u===false) {animate('next',true);} }, o.autoStart); } function current(t) { if(t===c+1){t=1;} if(t===0){t=c;} $(o.pagination+' li a',obj).parent().siblings().removeClass('active'); $(o.pagination+' li a[rel="' + (t) + '"]',obj).parent().addClass('active'); } function animate(dir,clicked){ u = true; switch(dir){ case 'next': t = t+1; m = (-(t*w-w)*i); current(t); params[o.vertical ? 'top' : 'left'] = m; $(o.slides,obj).animate(params, o.slidespeed,function(){ if (t===c+1) { t = 1; params[o.vertical ? 'top' : 'left'] = 0; $(o.slides,obj).css(params,function(){ $(o.slides,obj).animate(params); }); $(o.slides,obj).children().each(function(){ if (pt<i) { params[o.vertical ? 'top' : 'left'] = (w*pt)+pd; $(o.slides,obj).children(':eq('+pt+')').css(params); params[o.vertical ? 'top' : 'left'] = -(w*(pt+os+1)-pd); $(o.slides,obj).children(':eq('+(s-(pt+1))+')').css(params); } else { pt = 0; return false; } pt = pt+1; }); } if (t===c) { $(o.slides,obj).children().each(function(){ if (pt<i) { params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd; $(o.slides,obj).children(':eq('+(pt)+')').css(params); } else { pt = 0; return false; } pt = pt+1; }); } if (t===2) { $(o.slides,obj).children().each(function(){ pt = pt+1; if (pt<i+1) { params[o.vertical ? 'top' : 'left'] = ((w*s)+pd)-(w*pt); $(o.slides,obj).children(':eq('+(s-pt)+')').css(params); } else { pt = 0; return false; } }); } u = false; }); break; case 'prev': t = t-1; m = (-(t*w-w)*i); current(t); params[o.vertical ? 'top' : 'left'] = m; $(o.slides,obj).animate(params, o.slidespeed,function(){ if (t===0) { t = c; params[o.vertical ? 'top' : 'left'] = -w*(s-i)-(w*os); $(o.slides,obj).css(params); $(o.slides,obj).children().each(function(){ if (pt<i) { params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd; $(o.slides,obj).children(':eq('+pt+')').css(params); params[o.vertical ? 'top' : 'left'] = (s*w)+pd-(pt*w)-w; $(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params); } else { pt = 0; return false; } pt = pt+1; }); } if (t===2) { $(o.slides,obj).children().each(function(){ if (pt<i) { params[o.vertical ? 'top' : 'left'] = (w*pt)+pd; $(o.slides,obj).children(':eq('+pt+')').css(params); } else { pt = 0; return false; } pt = pt+1; }); } if (t===1) { $(o.slides,obj).children().each(function(){ if (pt<i) { params[o.vertical ? 'top' : 'left'] = -(w*pt)-w+pd-(w*os); $(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params); } else { pt = 0; return false; } pt = pt+1; }); } u = false; }); break; case 'fade': t = [t]*1; m = (-(t*w-w)*i); current(t); $(o.slides,obj).children().fadeOut(o.fadespeed, function(){ params[o.vertical ? 'top' : 'left'] = m; $(o.slides,obj).css(params); $(o.slides,obj).children().each(function(){ if (pt<i) { params[o.vertical ? 'top' : 'left'] = (pt*w)+pd; $(o.slides,obj).children(':eq('+pt+')').css(params); params[o.vertical ? 'top' : 'left'] = w*(s-pt)-w+pd; $(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params); } else { pt = 0; return false; } pt = pt+1; }); if(t===c){ $(o.slides,obj).children().each(function(){ if (pt<i) { params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd; $(o.slides,obj).children(':eq('+(pt)+')').css(params); } else { pt = 0; return false; } pt = pt+1; }); } if(t===1){ $(o.slides,obj).children().each(function(){ pt = pt+1; if (pt<i+1) { params[o.vertical ? 'top' : 'left'] = -(w*pt)+pd-(w*os); $(o.slides,obj).children(':eq('+(s-pt)+')').css(params); } else { pt = 0; return false; } }); } $(o.slides,obj).children().fadeIn(o.fadespeed); u = false; }); break; default: break; } } }); }; })(jQuery); CSS Code: <div class="tabs-wrap"> <h2 class="extra-title">Products</h2> <!-- tabs begin --> <ul class="tabs"> <li><a href="#tab1">Panels</a></li> <li><a href="#tab2">Keypads</a></li> <li><a href="#tab3">Devices</a></li> <li><a href="#tab3">Manuals</a></li> </ul> </div> <div class="tab_container"> <div id="tab1" class="tab_content"> <div class="loopedCarousel"> <div class="container"> <div class="slides"> <!-- slide 1 --> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>Power Series</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>Alexor</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>9047</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>New Panel</strong> Spring 2011 </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>Power Series</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>Alexor</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>9047</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>New Panel</strong> Spring 2011 </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>Power Series</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>Alexor</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>9047</strong> Now Available </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> <div> <dl> <dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt> <dd> <strong>New Panel</strong> Spring 2011 </dd> <dd class="last"> <a href="#"><img src="images/info-icon.gif" alt="" /></a>Details </dd> </dl> </div> </div> </div> </div> </div> <div id="tab2" class="tab_content"> <div class="loopedCarousel"> <div class="container"> <div class="slides"> </div> </div> </div> </div> </div> let me know if you need any further information. thank you! Similar TutorialsI bought a slider script and need to merge it in the website. What is the best to put the script in the header or in the footer? And where i have to put it on wich line? I tried a lot and i have almost no more hair left on my head! One time i managed to get the images below header but not in a slider, it added the images below each other. It's not loading jquery or something else i don't know... this is the slider script: <?php echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR...1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> <title>JQuery-Image-Slider</title> <link href=\"css/default.css\" rel=\"stylesheet\" type=\"text/css\" /> <script src=\"js/jquery.js\" type=\"text/javascript\"></script> <script src=\"js/yslider.js\" type=\"text/javascript\"></script> <script src=\"js/init.js\" type=\"text/javascript\"></script> </head> <body> <div id=\"content\"> <div class=\"slider\"> <div class=\"sliderContent\"> <div class=\"item\"> <img src=\"img/img1.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img2.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img3.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img4.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img5.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img6.jpg\" alt=\"\" /> </div> </div> </div> </div> </body> </html> "; ?> The header and footer script are atached Attached Files footer.php 3.26KB 0 downloads header.php 16.48KB 0 downloads Hi, A page that loads a Slider on my Word Press Page loads the slider to OFF. I want It to load to ON as default Its in a php file that resides in a Plugin inside a Shortcodes directory Ive tried to change it but it seems to do nothing when i reload the page. I even deleted the file with the code in and it didnt effect the page at all? Any help would be very mutch appriciated.
if($enableGoogle == 'yes'){ Hi all, I have a problem I am not sure how to sort, hopefully someone here can help. I have a sliding login panel on a website that I am making. Its quite discreet. I have a stripped down version here that you can see: http://mgdesign.hostultra.com/login_test/login_test.php On the page I am making, users with a log in enter their details and will be taken to the restricted page. I would like this sliding panel to be on every page when the user is not logged in. Once they log in from the sliding panel they can still surf around all the main site pages. When they log out the session dies and it reverts to the home page. However, when they are logged in I would like the sliding login panel to disappear from the top of each page. Is there any way I can do this simply? Any help or advice would be greatly appreciated. This topic has been moved to Third Party PHP Scripts. http://www.phpfreaks.com/forums/index.php?topic=327718.0 Im turning a static slider revolution in a dynamic. Images are uploading and fetching perfect from Mysql DB but the texts (top-text) is showing only in the first slide. The rest is empty. Here is the Code
Any help would be great.
UPLOAD.php
<?php
// Include the database configuration file
include 'database/dbConfig.php';
$statusMsg = '';
// File upload path
$targetDir = "uploads/";
$fileName = basename($_FILES["file"]["name"]);
$top_text = filter_input(INPUT_POST, 'top_text');
$targetFilePath = $targetDir . $fileName;
$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
if(isset($_POST["submit"]) && !empty($_FILES["file"]["name"])){
// Allow certain file formats
$allowTypes = array('jpg','png','jpeg','gif','pdf');
if(in_array($fileType, $allowTypes)){
// Upload file to server
if(move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)){
// Insert image file name into database
$insert = $db->query("INSERT into images (file_name, top_text, uploaded_on) VALUES ('".$fileName."', '".$top_text."', NOW())");
if($insert){
$statusMsg = "The file ".$fileName. " has been uploaded successfully.";
}else{
$statusMsg = "File upload failed, please try again.";
}
}else{
$statusMsg = "Sorry, there was an error uploading your file.";
}
}else{
$statusMsg = 'Sorry, only JPG, JPEG, PNG, GIF, & PDF files are allowed to upload.';
}
}else{
$statusMsg = 'Please select a file to upload.';
}
// Display status message
echo $statusMsg;
?>
SLIDER
<!-- Revolution slider -->
<section id="slider">
<div class="tp-banner-container ">
<div class="tp-banner rev-banner-fullscreen">
<ul>
<!-- SLIDE -->
<?php
// Include the database configuration file
include 'database/dbConfig.php';
// Get images from the database
$query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
$imageURL = 'uploads/'.$row["file_name"];
$top_text = $row['top_text'];
?>
<!-- DYNAMIC SLIDE -->
<li data-index="rs-140" data-transition="slideup" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="1/2" data-description="">
<!-- MAIN IMAGE -->
<img src="<?php echo $imageURL; ?>" alt="" style='background-color:#f4f4f4' alt="" width="482" height="800" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYERS 1.2 -->
<div class="tp-caption tp-resizeme" id="slide-1-layer-2" data-x="['left','left','left','left']" data-hoffset="['102','102','67','40']" data-y="['top','top','top','top']" data-voffset="['150','150','60','60']" data-fontsize="['18','18','14','14']" data-width="['345','345','345','259']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:50%;z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:900;e:Power4.easeInOut;" data-transform_out="x:-50%;opacity:0;s:800;e:Power2.easeInOut;s:300;e:Power2.easeInOut;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 345px; max-width: 345px; white-space: normal; color: #3e3e3e; font-family: 'Montserrat'; letter-spacing: 7px;">
<?php echo $top_text; ?>
</div>
<!-- /END DYNAMIC SLIDE -->
</li>
<?php }
}else{?>
<!-- DEFAULT SLIDE -->
<li data-index="rs-140" data-transition="slideup" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="1/2" data-description="">
<!-- MAIN IMAGE -->
<img src="images/slide/slide-5-bg.jpg" style='background-color:#f4f4f4' alt="" width="482" height="800" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYERS 1.2 -->
<div class="tp-caption tp-resizeme" id="slide-1-layer-2" data-x="['left','left','left','left']" data-hoffset="['102','102','67','40']" data-y="['top','top','top','top']" data-voffset="['150','150','60','60']" data-fontsize="['18','18','14','14']" data-width="['345','345','345','259']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:50%;z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:900;e:Power4.easeInOut;" data-transform_out="x:-50%;opacity:0;s:800;e:Power2.easeInOut;s:300;e:Power2.easeInOut;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 345px; max-width: 345px; white-space: normal; color: #3e3e3e; font-family: 'Montserrat'; letter-spacing: 7px;">
New Arrival
</div>
<!-- /END DEFAULT SLIDE -->
<?php } ?>
</li>
<!-- /SLIDE 1 -->
</ul>
</div>
<!-- /tp-banner -->
</div>
<!-- /tp-banner-container -->
</section>
<!-- /#Revolution slider -->
Hey guys I am trying to link my post tilte for pagnation to the actual post. This is wordpress blog-page.php
MY SITE IS GSUEAGLENATION.COM on the homepage any of the sliders you can tell that the pagnantion titles don't link anywhere
$slider_pagination[] = get_the_title(); ------- I have tried messing around with this code and it just messesup my site
snippet EXAMPLE BELOW OF WHERE MY CODE IS PULLING <div class="pager-desc"> <span class="cs-desc"> '.$slider_title.' ---------------------------this is where my titles are showing up on my site but Its only pulling the title I want to like the title to the post </span> </div> </li>'; } echo '</ul></div>'; } px_enqueue_cycle_script(); endif; wp_reset_postdata(); \ Attached Files page_blog.php 49.11KB 4 downloads I've found a nice "content slider", and would now need a little help to get the info from MySQL, and show that in the "slider". The slider generates the following example: Code: [Select] <div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="images/image1.jpg" alt="" /> <div class="info" > <h2><a href="#">15+ Excellent High Speed Photographs</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p> </div> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="images/image2.jpg" alt="" /> <div class="info" > <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2> <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p> </div> </div> <!-- Third Content --> .... </div> First I have to get all the headers/titles to the list/tab (menu): Code: [Select] <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li> </ul> .. then the "title" is needed (again), and image, text for the fragments/divs. Code: [Select] <div id="fragment-?" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="images/image2.jpg" alt="" /> <div class="info" > <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2> <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p> </div> </div>Do not really know how to resolve this in a good way. After image is drop into container , I want to move copy of the original image to be move when original image dragend within container. I tried but it display copy image each time when original image dragend. can anyone help me?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
#toolbar{
width:350px;
height:35px;
border:solid 1px blue;
}
</style>
<script>
$(function(){
var $house=$("#house");
$house.hide();
var $stageContainer=$("#container");
var stageOffset=$stageContainer.offset();
var offsetX=stageOffset.left;
var offsetY=stageOffset.top;
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var image1=new Image();
image1.onload=function(){
$house.show();
}
image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157";
$house.draggable({
helper:'clone',
});
$house.data("url","house.png"); // key-value pair
$house.data("width","32"); // key-value pair
$house.data("height","33"); // key-value pair
$house.data("image",image1); // key-value pair
$stageContainer.droppable({
drop:dragDrop,
});
function dragDrop(e,ui){
var x=parseInt(ui.offset.left-offsetX);
var y=parseInt(ui.offset.top-offsetY);
var element=ui.draggable;
var data=element.data("url");
var theImage=element.data("image");
var image = new Kinetic.Image({
name:data,
x:x,
y:y,
image:theImage,
draggable: true,
dragBoundFunc: function(pos) {
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
image.on("dragend", function(e) {
var points = image.getPosition();
var image1 = new Kinetic.Image({
name: data,
id: "imageantry",
x: points.x+65,
y: points.y,
image: theImage,
draggable: false
});
layer.add(image1);
layer.draw();
});
image.on('dblclick', function() {
image.remove();
layer.draw();
});
layer.add(image);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="toolbar">
<img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br>
</div>
<div id="container"></div>
</body>
</html>
Edited by Biruntha, 08 January 2015 - 10:14 AM. The script for creating a new file name for the image:
$validextensions = array("jpeg", "jpg", "png"); //Extensions which are allowed
$ext = explode('.', basename($_FILES['file']['name'][$i]));//explode file name from dot(.)
$file_extension = end($ext); //store extensions in the variable
$new_image_name = md5(uniqid()) . "." . $ext[count($ext) - 1];
$target_path = $target_path . $new_image_name;//set the target path with a new name of image
The script creates a new file like:
f6c9b8d9db05366c3504210cded9ddb2.jpgand moves the file to the "uploads" folder. And then the script also creates a thumbnail with the same file name and moves the file to the "thumbs" folder. The issue I am having is that the same ID code could happen again for a different image in the database, thus I would be calling a different original sized image than the thumbnail image. My question is: How to avoid this issue of the same ID code has happened again for a different file. What is the proper way to reference the anchor tag of the thumbnail image to its actual original sized image? With the script I have the thumbnail image would be coming from the "thumbs" folder and the anchor tag would get referenced to the "uploads" folder to get the original sized image. Edited by glassfish, 12 October 2014 - 05:51 AM. Hi, I've read a lot of places that it's not recommended to store binary files in my db. So instead I'm supposed to upload the image to a directory, and store the link to that directory in database. First, how would I make a form that uploads the picture to the directory (And what kinda directories are we talking?). Secondly, how would I retrieve that link? And I guess I should rename the picture.. I'd appreciate any help, or a good tutorial (Haven't found any myself). How can i edit just one image at on time with a multiple image upload form? I have the images being stored in a folder and the path being stored in MySQL. I also have the files being uploaded with a unique id. My issue is that I want to be able to pass the values of what is already in $name2 $name3 $name4 if I only want to edit $name1. I don't want to have to manually update the 4 images. Here is the PHP: Code: [Select] <?php require_once('storescripts/connect.php'); mysql_select_db($database_phpimage,$phpimage); $uploadDir = 'upload/'; if(isset($_POST['upload'])) { foreach ($_FILES as $file) { $fileName = $file['name']; $tmpName = $file['tmp_name']; $fileSize = $file['size']; $fileType = $file['type']; if ($fileName != ""){ $filePath = $uploadDir; $fileName = str_replace(" ", "_", $fileName); //Split the name into the base name and extension $pathInfo = pathinfo($fileName); $fileName_base = $pathInfo['fileName']; $fileName_ext = $pathInfo['extension']; //now we re-assemble the file name, sticking the output of uniqid into it //and keep doing this in a loop until we generate a name that //does not already exist (most likely we will get that first try) do { $fileName = $fileName_base . uniqid() . '.' . $fileName_ext; } while (file_exists($filePath.$fileName)); $file_names [] = $fileName; $result = move_uploaded_file($tmpName, $filePath.$fileName); } if(!get_magic_quotes_gpc()) { $fileName = addslashes($fileName); $filePath = addslashes($filePath); } $fileinsert[] = $filePath; } } $mid = mysql_real_escape_string(trim($_POST['mid'])); $cat = mysql_real_escape_string(trim($_POST['cat'])); $item = mysql_real_escape_string(trim($_POST['item'])); $price = mysql_real_escape_string(trim($_POST['price'])); $about = mysql_real_escape_string(trim($_POST['about'])); $fields = array(); $values = array(); $updateVals = array(); for($i = 0; $i < 4; $i++) { $values[$i] = isset($file_names[$i]) ? mysql_real_escape_string($file_names[$i]) : ''; if($values[$i] != '') { $updateVals[] = 'name' . ($i + 1) . " = '{$values[$i]}'"; } } $updateNames = ''; if(count($updateVals)) { $updateNames = ", " . implode(', ', $updateVals); } $update = "INSERT INTO image (mid, cid, item, price, about, name1, name2, name3, name4) VALUES ('$mid', '$cat', '$item', '$price', '$about', '$values[0]', '$values[1]', '$values[2]', '$values[3]') ON DUPLICATE KEY UPDATE cid = '$cat', item = '$item', price = '$price', about = '$about' $updateNames"; $result = mysql_query($update) or die (mysql_error()); Hello, Five images will be displayed inside a division. There will be a previous and next button/link. If someone click the next button the next image will be added in that div and the first image will be gone from that div. The previous button/link will do the same thing. Is it possible with php? I am confused if it's a javascript or ajax question. Thanks. Can I get some help or a point in the right direction.
I am trying to create a form that allows me to add, edit and delete records from a database.
I can add, edit and delete if I dont include the image upload code.
If I include the upload code I cant edit records without having to upload the the same image to make the record save to the database.
So I can tell I have got the code processing in the wrong way, thing is I cant seem to see or grasp the flow of this, to make the corrections I need it work.
Any help would be great!
Here is the form add.php code
<?php require_once ("dbconnection.php");
$id="";
$venue_name="";
$address="";
$city="";
$post_code="";
$country_code="";
$url="";
$email="";
$description="";
$img_url="";
$tags="";
if(isset($_GET['id'])){
$id = $_GET['id'];
$sqlLoader="Select from venue where id=?";
$resLoader=$db->prepare($sqlLoader);
$resLoader->execute(array($id));
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Venue Page</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<?php
$sqladd="Select * from venue where id=?";
$resadd=$db->prepare($sqladd);
$resadd->execute(array($id));
while($rowadd = $resadd->fetch(PDO::FETCH_ASSOC)){
$v_id=$rowadd['id'];
$venue_name=$rowadd['venue_name'];
$address=$rowadd['address'];
$city=$rowadd['city'];
$post_code=$rowadd['post_code'];
$country_code=$rowadd['country_code'];
$url=$rowadd['url'];
$email=$rowadd['email'];
$description=$rowadd['description'];
$img_url=$rowadd['img_url'];
$tags=$rowadd['tags'];
}
?>
<h1 class="edit-venue-title">Add Venue:</h1>
<form role="form" enctype="multipart/form-data" method="post" name="formVenue" action="save.php">
<input type="hidden" name="id" value="<?php echo $id; ?>"/>
<div class="form-group">
<input class="form-control" type="hidden" name="id" value="<?php echo $id; ?>"/>
<p><strong>ID:</strong> <?php echo $id; ?></p>
<strong>Venue Name: *</strong>
<input class="form-control" type="text" name="venue_name" value="<?php echo $venue_name; ?>"/><br/>
<br/>
<strong>Address: *</strong>
<input class="form-control" type="text" name="address" value="<?php echo $address; ?>"/><br/>
<br/>
<strong>City: *</strong>
<input class="form-control" type="text" name="city" value="<?php echo $city; ?>"/><br/>
<br/>
<strong>Post Code: *</strong>
<input class="form-control" type="text" name="post_code" value="<?php echo $post_code; ?>"/><br/>
<br/>
<strong>Country Code: *</strong>
<input class="form-control" type="text" name="country_code" value="<?php echo $country_code; ?>"/><br/>
<br/>
<strong>URL: *</strong>
<input class="form-control" type="text" name="url" value="<?php echo $url; ?>"/><br/>
<br/>
<strong>Email: *</strong>
<input class="form-control" type="email" name="email" value="<?php echo $email; ?>"/><br/>
<br/>
<strong>Description: *</strong>
<textarea class="form-control" type="text" name="description" rows ="7" value=""><?php echo $description; ?></textarea><br/>
<br/>
<strong>Image Upload: *</strong>
<input class="form-control" type="file" name="image" value="<?php echo $img_url; ?>"/>
<small>File sizes 300kb's and below 500px height and width.<br/><strong>Image is required or data will not save.</strong></small> <br/><br/>
<strong>Tags: *</strong>
<input class="form-control" type="text" name="tags" value="<?php echo $tags; ?>"/><small>comma seperated vales only, e.g. soul,hip-hop,reggae</small><br/>
<br/>
<p>* Required</p>
<br/>
<input class="btn btn-primary" type="submit" name="submit" value="Save">
</div>
</form>
</div>
</body>
</html>
Here is the save.php code
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
include ("dbconnection.php");
$venue_name=$_POST['venue_name'];
$address=$_POST['address'];
$city=$_POST['city'];
$post_code=$_POST['post_code'];
$country_code=$_POST['country_code'];
$url=$_POST['url'];
$email=$_POST['email'];
$description=$_POST['description'];
$tags=$_POST['tags'];
$id=$_POST['id'];
if(is_uploaded_file($_FILES['image']['tmp_name'])){
$folder = "images/hs-venues/";
$file = basename( $_FILES['image']['name']);
$full_path = $folder.$file;
if(move_uploaded_file($_FILES['image']['tmp_name'], $full_path)) {
//echo "succesful upload, we have an image!";
var_dump($_POST);
if($id==null){
$sql="INSERT INTO venue(venue_name,address,city,post_code,country_code,url,email,description,img_url,tags)values(:venue_name,:address,:city,:post_code,:country_code,:url,:email,:description,:img_url,:tags)";
$qry=$db->prepare($sql);
$qry->execute(array(':venue_name'=>$venue_name,':address'=>$address,':city'=>$city,':post_code'=>$post_code,':country_code'=>$country_code,':url'=>$url,':email'=>$email,':description'=>$description,':img_url'=>$full_path,':tags'=>$tags));
}else{
$sql="UPDATE venue SET venue_name=?, address=?, city=?, post_code=?, country_code=?, url=?, email=?, description=?, img_url=?, tags=? where id=?";
$qry=$db->prepare($sql);
$qry->execute(array($venue_name, $address, $city, $post_code, $country_code, $url, $email, $description, $full_path, $tags, $id));
}
if($success){
var_dump($_POST);
echo "<script language='javascript' type='text/javascript'>alert('Successfully Saved!')</script>";
echo "<script language='javascript' type='text/javascript'>window.open('index.php','_self')</script>";
}
else{
var_dump($_POST);
echo "<script language='javascript' type='text/javascript'>alert('Successfully Saved!')</script>";
echo "<script language='javascript' type='text/javascript'>window.open('index.php','_self')</script>";
}
} //if uploaded
else{
var_dump($_POST);
echo "<script language='javascript' type='text/javascript'>alert('Upload Recieved but Processed Failed!')</script>";
echo "<script language='javascript' type='text/javascript'>window.open('index.php','_self')</script>";
}
} //move uploaded
else{
var_dump($_POST);
echo "<script language='javascript' type='text/javascript'>alert('Successfully Updated.')</script>";
echo "<script language='javascript' type='text/javascript'>window.open('index.php','_self')</script>";
}
?>
Thanks in advance!
Edited by hankmoody, 12 August 2014 - 05:15 PM. Hello, I've had success creating a cool vanity QR code with rounded edges for my organization by generating a standard QR code, then applying a noise -> median effect in Photoshop to get the edges rounded among some other effects. Photoshop is great, but I want to automate this. I found a great PHP library to generate QR codes. The part I don't get is the rounding of the hard edges. I've seen other sites do it like this one. So far google searches are yielding rounded corner tutorials. Any thoughts on how to do this with GD or ImageMagic? Best regards, Chris Would like to be able to click on a radio button that represents an image. Once selected and submitted, have that image display on another page. I have an idea, but need some guidance. BTW, is using php only doable? Is there a simpler or more elegant way to do this? Thanks all! Hello I am having problems uploading an image through a HTML form. I want the image to be uploaded to the server and the image name to be written to the mysql database. Below is the code I am using: Code: [Select] <?php if (isset($_POST['add'])){ echo "<br /> add value is true"; $name = $_POST['name']; $description = $_POST['description']; $price = $_POST['price']; $category_id = $_POST['category_name']; $image = $_FILES['image']['name']; //file path of the image upload $filepath = "../images/"; //mew name for the image upload $newimagename = $name; //new width for the image $newwidth = 100; //new height for the image $newheight = 100; include('../includes/image-upload.php'); mysql_query("INSERT INTO item (item_name, item_description, item_price, item_image) VALUES ('$name','$description','$price','$image')"); ?> Here is the image-upload.php file code: Code: [Select] <?php //assigns the file to the image $image =$_FILES["image"]["name"]; $uploadedfile =$_FILES["image"]["tmp_name"]; if ($image) { //retrieves the extension type from image upload $extension = getextension($image); //converts extension to lowercase $extension = strtolower($extension); //create image from uploaded file type if($extension=="jpg" || $extension=="jpeg") { $uploadedfile = $_FILES['image']['tmp_name']; $src = imagecreatefromjpeg($uploadedfile); }else if($extension=="png") { $uploadedfile = $_FILES['image']['tmp_name']; $src = imagecreatefrompng($uploadedfile); }else{ $src = imagecreatefromgif($uploadedfile); } //creates a list of the width and height of the image list($width,$height)=getimagesize($uploadedfile); //adds color to the image $tmp = imagecreatetruecolor($newwidth,$newheight); //create image imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height); //set file name $filename = $filepath.$newimagename.".".$extension; $imagename = $newimagename.".".$extension; //uploads new file with name to the chosen directory imagejpeg($tmp,$filename,100); //empty variables imagedestroy($src); imagedestroy($tmp); } ?> Any help would be appreciated, fairly new to all this! Thanks!!! This topic has been moved to mod_rewrite. http://www.phpfreaks.com/forums/index.php?topic=351137.0 Hi, I have some images that I want to resize to a square dimention (40px 40px). However, not all image are square, so when they are resized, they lose their ration and look squashed. Is there a way I can display just a part of the original image, say 40px x 40px on the top middle of each image? I hope that makes sense This resizer works fine except I would like it to save the original image AND the thumbnail. Right now its only saving the cropped thumbnail. It's seems simple enough but I've tried several different ways but can't get it to work. :( I would appreciate your help. :) define( 'DESIRED_IMAGE_WIDTH', 150 ); define( 'DESIRED_IMAGE_HEIGHT', 150 ); $source_path = $_FILES[ 'thumb' ][ 'tmp_name' ]; $timestamp = time(); $target = "image_files/".$imagename; move_uploaded_file($source, $target); // // Add file validation code here // list( $source_width, $source_height, $source_type ) = getimagesize( $source_path ); switch ( $source_type ) { case IMAGETYPE_GIF: $source_gdim = imagecreatefromgif( $source_path ); break; case IMAGETYPE_JPEG: $source_gdim = imagecreatefromjpeg( $source_path ); break; case IMAGETYPE_PNG: $source_gdim = imagecreatefrompng( $source_path ); break; } $source_aspect_ratio = $source_width / $source_height; $desired_aspect_ratio = DESIRED_IMAGE_WIDTH / DESIRED_IMAGE_HEIGHT; if ( $source_aspect_ratio > $desired_aspect_ratio ) { // // Triggered when source image is wider // $temp_height = DESIRED_IMAGE_HEIGHT; $temp_width = ( int ) ( DESIRED_IMAGE_HEIGHT * $source_aspect_ratio ); } else { // // Triggered otherwise (i.e. source image is similar or taller) // $temp_width = DESIRED_IMAGE_WIDTH; $temp_height = ( int ) ( DESIRED_IMAGE_WIDTH / $source_aspect_ratio ); } // // Resize the image into a temporary GD image // $temp_gdim = imagecreatetruecolor( $temp_width, $temp_height ); imagecopyresampled( $temp_gdim, $source_gdim, 0, 0, 0, 0, $temp_width, $temp_height, $source_width, $source_height ); // // Copy cropped region from temporary image into the desired GD image // $x0 = ( $temp_width - DESIRED_IMAGE_WIDTH ) / 2; $y0 = ( $temp_height - DESIRED_IMAGE_HEIGHT ) / 2; $desired_gdim = imagecreatetruecolor( DESIRED_IMAGE_WIDTH, DESIRED_IMAGE_HEIGHT ); imagecopy( $desired_gdim, $temp_gdim, 0, 0, $x0, $y0, DESIRED_IMAGE_WIDTH, DESIRED_IMAGE_HEIGHT ); // // Render the image // Alternatively, you can save the image in file-system or database // header( 'Content-type: image/jpeg' ); imagejpeg( $desired_gdim, "image_files/" . $timestamp . $_FILES["thumb"]["name"] ); hello friends, while clicking the form all the information goes to database, I have one image upload field, when cliking the submit button, i would like 'image name' to go in database and file to go in /upload folder, i have tried this for hours and gave up, if anyone help me in this, i would be very greatful |
|||||||