I am using jquery sortable to sort an images grid. The script works (I am getting the grid of images, I can sort it (drag-drop), my success results yield the data array expected (see below) and the firebug network tab lists the sorted success data posted. My problem after hours of searching is to find out why the foreach loop does not echo the posted values of the success results. Suspect I'm missing the obvious here. Any assistance would be really appreciated.
filename: draggable.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<?php
<!-----------get media_urls from database----------------->
<div id="element">
<ul id="sortable">
<li id="item-1" class="ui-state-default"> <img class="image" src="<?php echo $media_url1 ?>" width="100px" height="100px"> </li>
<li id="item-2" class="ui-state-default"> <img class="image" src="<?php echo $media_url1 ?>" width="100px" height="100px"> </li>
<li id="item-3" class="ui-state-default"> <img class="image" src="<?php echo $media_url2 ?>" width="100px" height="100px"> </li>
<li id="item-4" class="ui-state-default"> <img class="image" src="<?php echo $media_url3 ?>" width="100px" height="100px"> </li>
<li id="item-5" class="ui-state-default"> <img class="image" src="<?php echo $media_url4 ?>" width="100px" height="100px"> </li>
<li id="item-6" class="ui-state-default"> <img class="image" src="<?php echo $media_url5 ?>" width="100px" height="100px"> </li>
<li id="item-7" class="ui-state-default"> <img class="image" src="<?php echo $media_url6 ?>" width="100px" height="100px"> </li>
<li id="item-8" class="ui-state-default"> <img class="image" src="<?php echo $media_url7 ?>" width="100px" height="100px"> </li>
<li id="item-9" class="ui-state-default"> <img class="image" src="<?php echo $media_url8 ?>" width="100px" height="100px"> </li>
<li id="item-10" class="ui-state-default"> <img class="image" src="<?php echo $media_url9 ?>" width="100px" height="100px"> </li>
</ul>
//test results-see two outputs below
Query string: <span></span>
<p class ="result"></p>
</div>
<script>
$('ul').sortable({
update: function (event, ui) {
var data = $(this).sortable('serialize');
$('span').text(data);
$.ajax({
data: data,
type: 'POST',
url: 'draggable.php',
success:function(result){
$(".result").html(data);}
});
}
});
//$(window).resize(resize);
</script>
<?php
$i = 0;
foreach ($_POST['item'] as $value) {
echo "each".$value;
$i++;
}
?>
</body>
</html>
and here are the two sucessful results
Query string: item[]=2&item[]=1&item[]=3&item[]=4&item[]=5&item[]=6&item[]=7&item[]=8&item[]=9&item[]=10
item[]=2&item[]=1&item[]=3&item[]=4&item[]=5&item[]=6&item[]=7&item[]=8&item[]=9&item[]=10
Related
I tried to add an image (137×30) next to the search bar, but I cannot do it properly. It is supposed to look like this:
The code for search bar is like this:
<?php get_search_form(); ?>
Adding the image gave me this result:
How do I make this image align properly?
The code for this webpage as reference if you need to look at it:
<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html <?php language_attributes(); ?> class="no-js">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title( '-', true, 'right' ); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie8.css">
<![endif]-->
<script type="text/javascript">
!function(){function t(){var t=r("utm_content");if(t){var e=new Date;e.setDate(e.getDate()+30),document.cookie=t+";expires="+e.toGMTString()+";path=/"}else if(document.cookie)for(var o=document.cookie.split(/; */),n=0;n<o.length;n++)if(0===o[n].toLowerCase().trim().indexOf("utm_content=")){t=o[n];break}return t}function e(t){try{console.log(t)}catch(e){alert(t)}}function r(t){var e=top.location.search?top.location.search.substring(1):null;if(e)for(var r=e.split("&"),o=0;o<r.length;o++)if(0===r[o].toLowerCase().trim().indexOf(t+"="))return r[o];return null}var o="",n=r("mctest");if(n)e("dnr tag version: 20160125"),o="http://localhost:8080/rip/library/dnr/mcDnrTag.debug.js";else{var a=t(),c="";a&&(c=top.location.search?0<=top.location.search.indexOf("utm_content")?top.location.search:top.location.search+"&"+a:"?"+a,o="https://script.advertiserreports.com/redirector/dnr"+c)}if(o){var i=document.createElement("script");i.src=o,i.type="text/javascript",scriptTag=document.getElementsByTagName("script")[0],scriptTag.parentNode.appendChild(i)}}();
</script>
<?php
wp_head();
if(function_exists('ot_get_option'))
echo ot_get_option( 'cnkt_google_analytics' );
?>
</head>
<body <?php body_class(); ?>>
<?php
$cats = '';
foreach(get_the_category() as $category)
$cats .= $category->slug . ' ';
?>
<div id="container" class="<?php echo $post->post_name; echo ' '. $cats; ?>">
Skip to main content
<div id="wrapper">
<header class="site-header" role="banner">
<div class="row">
<div class="large-12 columns">
<ul class="secondary hide-for-medium-down">
<li class="mailinglist">Join our Mailing List</li>
<li class="quote">Request a Quote</li>
</ul>
<div class="nav-wrap">
<div class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" />
</div>
<div class="sub-wrap hide-for-medium-down">
<nav id="utilitynav" role="navigation">
<ul id="menu-utility" class="menu">
<li id="menu-item-2398" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2398 menu-item-news">
News & Events
</li>
<li id="menu-item-2397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2397 menu-item-contact-us">
Contact Us
</li>
<li class="linkedin">
<a href="https://www.linkedin.com/company/shaver-industries-inc<?php echo '-' ?>" target="_blank">
<em class="fa fa-linkedin-square"></em>
<span class="offscreen">LinkedIn</span>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/shaver_inc" target="_blank">
<em class="fa fa-twitter"></em>
<span class="offscreen">Twitter</span>
</a>
</li>
<li class="facebook">
<a href="https://www.facebook.com/ShaverIndustriesInc?fref=ts" target="_blank">
<em class="fa fa-facebook"></em>
<span class="offscreen">Facebook</span>
</a>
</li>
<li class="youtube">
<a href="https://www.youtube.com/channel/UC6zDe4BG-OAuV4_JLrmu-JA" target="_blank">
<em class="fa fa-youtube"></em>
<span class="offscreen">YouTube</span>
</a>
</li>
</ul>
<?php /*if ( has_nav_menu('utility-menu')):?>
<?php wp_nav_menu( array( 'theme_location' => 'utility-menu', 'container'=>'' ) );
dynamic_sidebar('social-media'); ?>
<?php endif;*/ ?>
<?php
if ( function_exists( 'ot_get_option' ) ) {
if (ot_get_option('cnkt_phone')) {
echo '<span class="number">'.ot_get_option('cnkt_phone').'</span>';
}
}
?>
</nav>
<?php get_search_form(); ?>
</div>
</div>
<nav id="mnav" class="hide-for-medium-down" role="navigation">
<?php if ( has_nav_menu('primary-menu')):?>
<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container'=>'' ) ); ?>
<?php endif; ?>
</nav>
</div>
</div>
<div id="mnav-toggle" class="nav-toggle hide-for-medium-up" aria-hidden="true">
<a href="javascript:void(0);">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</a>
</div>
</header>
<div id="mobile-nav"><div class="wrap"></div></div>
<?php if(!is_page('home')){
get_template_part('includes/page-banner');
} ?>
<!-- #page-content -->
<div id="page-content">
Add an ID outside of your input and img and add below css. Demo example added like this. See at fiddle http://jsfiddle.net/wD5T9/
HTML
<div id='searchWrapper'>
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/>
</div>
CSS
#searchWrapper img {
vertical-align: middle;
}
Here is the solution of your problem....
Your Html
<div class="searchform">
<form method="get" action="http://www.shaverinc.com">
<label for="search" class="offscreen">Search Products</label>
<input type="search" placeholder="Search Products" id="s" name="s" value="">
<button type="submit"><i class="fa fa-search"></i><span class="offscreen">Submit</span></button>
</form>
</div>
<div class="flags">Hello</div>
Your CSS Here.....
.searchform {
position: relative;
overflow: hidden;
height: 34px;
width: 90%;
display: inline-block;
float: left;
}
.flags{
display: block;
width: 9%;
height: 34px;
position: relative;
float: left;
background: #ccc;
}
Manipulate the width according to your need...
I figure it out by myself, I should use div+table to figure this out
<div style="position: relative; width: 600px;">
<table style="width: 100%">
<tr>
<td width="80%"><?php get_search_form(); ?></td>
<td width="20%"><img src="<?php echo get_template_directory_uri(); ?>/img/flags.png"></td>
</tr>
</table>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Ok so I made my website in html, but theres some sort of white line bars located on the top and im not sure why they are there i think i made an error in my source code, if someone could please help figure out why they are there thatd be great (im new at html, only know the basics)
Heres a picture of it
<font size="4" color="white">
<h1>This Website Was Created By The One And Only SaucyFam
</font>
</div>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://www.silvergames.com/slitherio">
<link rel="alternate" href="http://www.silvergames.com/slitherio" hreflang="en">
<link rel="alternate" href="http://de.silvergames.com/slitherio" hreflang="de">
<link rel="alternate" href="http://ru.silvergames.com/slitherio" hreflang="ru">
<title>Slither.io | Game 2 Play Online</title>
<link href="http://i2.silvergames.com/css/n7.css" rel="stylesheet" type="text/css">
<link href="http://i2.silvergames.com/l-switch/css/polyglot-language-switcher-2.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="New Games" href="/feed/rss.xml" />
<script type="text/javascript" src="http://i1.silvergames.com/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://i1.silvergames.com/l-switch/js/jquery/jquery-polyglot.language.switcher.js"></script>
<script type="text/javascript" src="http://i2.silvergames.com/js/advertisement.js"></script>
<script type="text/javascript" src="http://i1.silvergames.com/js/vote.js"></script>
<script type="text/javascript" src="http://i2.silvergames.com/js/swfobject.js"></script>
<script type="text/javascript" src="http://i3.silvergames.com/js/fullscreen_full.js"></script>
</form>
<div class="clear_both"></div>
</div>
<div class="polyglot-language-switcher" data-grid-columns="1" data-anim-effect="fade" data-open-mode="click">
<ul style="display:none">
<li>
<a href="http://www.silvergames.com/slitherio" title="English" data-lang-id="en">
<img src="http://i1.silvergames.com/l-switch/images/flags/us.png" alt="English">English
</a>
</li>
<li>
<a href="http://de.silvergames.com/slitherio" title="Deutsch" data-lang-id="de">
<img src="http://i2.silvergames.com/l-switch/images/flags/de.png" alt="Deutsch">Deutsch
</a>
</li>
<li>
<a href="http://ru.silvergames.com/slitherio" title="Русский" data-lang-id="ru">
<img src="http://i3.silvergames.com/l-switch/images/flags/ru.png" alt="Русский">Русский
</a>
</li>
</ul>
<div class="clear_both"></div>
</div></div>
<div id="menu_2" style="display:none;">
<div id="items_2"></div> <div class="clear_both">
</div>
</div></div>
<div id="content">
<div id="container" style="width:1260px;">
<div id="game-box" style="">
<div id="game" >
<div id="game_embed" style="width:700px;height:500px;">
<iframe src="http://slither.io/" id="swf" allowfullscreen frameborder="0" scrolling="no" style="background-color:#000000;border:nvone;" width="700" height="500"></iframe>
</div >
</div>
<div id="game-features">
<div id="vote-buttons">
</button>
<span id="voted"></span>
</div>
<div id="zoom-button">
<div style="cursor:pointer;" id="fullscreen">
<img src="http://i1.silvergames.com/i/fullscreen.png" title="Fullscreen" alt="fullscreen">
</div>
</div>
<div id="walkthrough-button">
<div style="" id="walkthrough">
<a href="/slitherio/walkthrough" target="" title="Slither.io Walkthrough">
<img src="http://i1.silvergames.com/i/walkthrough.png" alt="walkthrough">
</a>
</div>
</div>
<div class="clear_both"></div>
</div>
</div>
<div id="game-related-box">
<div class="hot_box">
<div id="dynamic-editorial">
<ul>
<li>
<a href="/goodgame-empire" target="">
<img src="http://agar.io/img/1200x630.png " width="110" height="70" alt=":D"/>
</a>
</li>
<li>
Unblocked Agario
</li>
</ul>
</div>
<div id="dynamic-editorial-2">
<ul>
<li>
</div>
<div style="position: absolute; top: 530px; right: 220px; width: 250px; height: 150px; background-color: ">
<font size="4" color="white">
<h1>
<< Click Here To Go Into FullScreen Mode
</div>
<div style="position: absolute; top: 200px; right: 233px; width: 240px; height: 150px; background-color: ;">
<font size="4" color="white">
<h1>SaucyFams Very Own Server IP Mods, Coming Soon:
<IMG STYLE="position:absolute; TOP:70px; LEFT:10px; WIDTH:300px; HEIGHT:200px" SRC="http://slitheriogameplay.com/wp-content/uploads/2016/04/slither-io-mods-300x167.png">
</p>
</body>
</html>
<html>
<body background="http://slither.io/s/bg45.jpg">
The issue is the 10px padding-bottom.
In file n7.css , line 31, you'll see the following:
#content {
background-color: #ffffff;
padding-bottom: 10px;
}
Change by:
#content {
background-color: #ffffff;
padding-bottom: 0px;
}
Let me know how it goes.
The reason of problem here;
#content {
background-color: #ffffff;
padding-bottom: 10px;
}
But I see, "you are not very familiar with css" so this code is in a file of your server (http://i2.silvergames.com/css/n7.css). Please go there, find the code above and change:
#content {
background-color: #ffffff;
padding-bottom: 0px;
}
That's all.
I'm using a custom Wordpress theme which is Goblog theme, in which a slider is included (it's not a plugin). The slider worked fine untile one day it stoped working correctly. The only change I could have done about the slider was editing the CSS to add more height, which, I think, isn't the cause of this issue.
Basically everything works great on the slider, unless that the permalinks does not match with the content, and when clicked on, it redirects to another article.
Here is the php for the slider :
<?php if($bpxl_goblog_options['bpxl_home_slider'] == '1') { ?>
<div class="featuredslider flexslider loading">
<ul class="slides">
<?php
$slider_cat = '';
if(!empty($bpxl_goblog_options['bpxl_home_slider_cat'])) {
$slider_cats = $bpxl_goblog_options['bpxl_home_slider_cat'];
$slider_cat = implode(",", $slider_cats);
}
$slider_query = new WP_Query("cat=".$slider_cat."&orderby=date&order=DESC&showposts=3");
?>
<?php if($slider_query->have_posts()) : while ($slider_query->have_posts()) : $slider_query->the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>" class="featured-thumbnail featured-widgetslider">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('featured');
} else {
echo '<img src="' . get_stylesheet_directory_uri() . '/images/770x360.png" />';
}
?>
<div class="post-inner textcenter">
<header>
<h2 class="title title22">
<?php the_title(); ?>
</h2>
<div class="slider-meta" style="display:none;"><span><?php _e('Ecrit par'); ?></span> <?php the_author(); ?></div>
</header><!--.header-->
</div>
</a>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
<?php } ?>
The ouput HTML of the current slider (without editing) :
<div class="featuredslider flexslider">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="">
<a href="http://db-super.fr/episode-6-vostfr-dragon-ball-super/" title="Dragon Ball Super : Episode 6 VOSTFR" class="featured-thumbnail featured-widgetslider">
<img width="770" height="360" src="http://db-super.fr/wp-content/uploads/2015/08/DBSUPER-Episode-6-screen-6-770x360.jpg?7ac485" class="attachment-featured wp-post-image" alt="Beerus" draggable="false"> <div class="post-inner textcenter">
<header>
<h2 class="title title22">
Title </h2>
<div class="slider-meta" style="display:none;"><span>Ecrit par</span></div>
</header><!--.header-->
</div>
</a>
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" class="">
<a href="http://db-super.fr/episode-5-vostfr-dragonball-super/" title="Dragon Ball Super : Episode 5 VOSTFR" class="featured-thumbnail featured-widgetslider">
<img width="770" height="360" src="http://db-super.fr/wp-content/uploads/2015/08/dbsuper-episode-5-770x360.jpg?7ac485" class="attachment-featured wp-post-image" alt="dbsuper episode 5" draggable="false"> <div class="post-inner textcenter">
<header>
<h2 class="title title22">
Title</h2>
<div class="slider-meta" style="display:none;"><span>Ecrit par</span></div>
</header><!--.header-->
</div>
</a>
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide">
<a href="http://db-super.fr/marathon-dragonball-z-cinema-grand-rex/" title="Marathon Dragon Ball Z au cinéma Le Grand Rex" class="featured-thumbnail featured-widgetslider">
<img width="770" height="360" src="http://db-super.fr/wp-content/uploads/2015/08/fukkatu-770x360.jpg?7ac485" class="attachment-featured wp-post-image" alt="fukkatu" draggable="false"> <div class="post-inner textcenter">
<header>
<h2 class="title title22">
Title</h2>
<div class="slider-meta" style="display:none;"><span>Ecrit par</span></div>
</header><!--.header-->
</div>
</a>
</li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="">2</a></li><li><a class="flex-active">3</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#"><i class="fa fa-angle-left"></i></a></li><li><a class="flex-next" href="#"><i class="fa fa-angle-right"></i></a></li></ul></div>
I thought this might be a permalink issue, so I reloaded them. Also thinking it could be a cache issue I tried to desactivate some plugins that could interacts with the slider.
That's why I finally thought this issue came from the php code itself, unfortunately I didn't figured out where was the issue.
Any ideas of what is causing this problem ?
Edit : you can watch the slider here db-super .fr
Edit 2 : This issue is still not solved and i'm still looking for the cause of this problem.
Please try to Replace following line:
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>" class="featured-thumbnail featured-widgetslider">
with this one:
<a href="<?php echo esc_url(get_permalink()); ?>" title="<?php the_title_attribute(); ?>" class="featured-thumbnail featured-widgetslider">
I am trying to fetch data from a Mysql database (specifically images) and then display them in a carousel, like for example on the amazon.com homepage.
I am a beginner in CSS. I haven't used it much.
I have looked at a earlier question, but mine is not a list of images together. I just through the data from the database.
Any help will be appreciated.
From what I understood in your comment below, your problem is strictly related to CSS.
The images are showing vertically because the <li> aren't floated next to each other.
Here's the code:
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>
<style type="text/css">
.jcarousel {position:relative; overflow:hidden;}
.jcarousel ul {width: 20000em; position:relative; list-style:none; margin:0; padding:0;}
.jcarousel li {float:left;}
</style>
</head>
<body>
<div class="jcarousel">
<ul>
<li><img src="image1.jpg" alt="" /></li>
<li><img src="image2.jpg" alt="" /></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$('.jcarousel').jcarousel();
});
</script>
</body>
</html>
I know this is an old question but it might be useful for future users.
Here is a simple solution to implement a Bootstrap carousel to display images from database:
Fetch all imageID from the database and insert it in an array (note that I store the images as BLOB in my database:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="jquery-3.1.0.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<style>
.myCarousel{
height: 100%;
width: 700px ;
margin-top: 5px;
}
.slideimage{
width: 700px;
height: 320px !important;
}
</style>
</head>
<body>
<?php
include ('DBconnection.php');
$ImageArray = array();
$queryImages = "SELECT * FROM imagetable ";
$result = mysqli_query($conn,$queryImages);
if(mysqli_num_rows($result) >0){
while ($row = mysqli_fetch_array($result)){
$ImageArray[] = $row;
}
}
?>
<div id="myCarousel" class="myCarousel carousel
slideCarousel" data-ride="carousel" data-interval="5000" >
<ol class="carousel-indicators">
<?php
// creating indicators - note that at least one must be set as active
for($j=0;$j<count($ImageArray);$j++){
if($j==0){
echo ' <li data-target="#myCarousel" data-slide-to="'.$j.'" class="active"></li>';
}else{
echo ' <li data-target="#myCarousel" data-slide-to="'.$j.'"></li>';
}
}
?>
</ol>
<div class="carousel-inner" role="listbox">
<?php
for($j=0;$j<count($ImageArray);$j++){
//If it is the first image set it as active
if($j==0){
echo '<div class="item active">
<!--Using image id and url -->
<img class="slideimage" src="GetImageID.php?id=' .$ImageArray[$j]['ImageID'].'" />
<!-- or using base64_encode
<img src="data:image/jpeg;base64,'.base64_encode($ImageArray[$j]['Image']).'"/>
-->
</div>';
}
else{
echo '<div class="item">
<img class="slideimage" src="GetImageID.php?id=' .$ImageArray[$j]['ImageID'].'" />
</div>';
}
}
?>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
The GetImageID.php:
include ('DBconnection.php');
$imageid = $_GET['id'];
$query = "Select Image from imagetable WHERE ImageID = '$imageid'";
$result = mysqli_query($conn,$query);
$row = mysqli_fetch_array($result);
header("Content-type: image/jpeg");
echo $row['Image'];
I'm trying to make a very simple image switcher where basically when an item from a list is clicked the picture on a div changes.
I can't get it to work. Could you point me a solution about how to make this code below works?
<head>
<style>
li img { height: 30px; border: 1px dashed blue;}
.main_image { border: 1px solid black; height: 500px; width: 500px; }
</style>
<script type="text/javascript">
$('li img').click( function() {
$('#main').attr('src', $(this).attr('src'));
});
</script>
</head>
<body>
<div class="main_image">
<img id="main" src="" />
</div>
<ul>
<li>
<img src="http://placehold.it/200x300" alt="Image Name" />
</li>
<li>
<img src="http://placehold.it/300x400" alt="Image Name" />
</li>
</ul>
</body>
The mark-up:
<div class="gallery">
<img src="http://placehold.it/600x450" alt="" class="main" />
<ul class="thumbnails">
<li><img src="http://placehold.it/100x75" alt="" /></li>
<li><img src="http://placehold.it/100x75" alt="" /></li>
<li><img src="http://placehold.it/100x75" alt="" /></li>
...
</ul>
</div>
And the JavaScript:
$('.gallery').each(function () {
var gallery = this;
$('.thumbnails a', gallery).click(function (e) {
e.preventDefault();
$('img.main', gallery).attr('src', $(this).attr('href'));
});
});
This should work for any main image/thumbnail combination wrapped in a <div> with a class of gallery as in the above mark-up.
So for example, you could have multiple galleries on the same page, and the above jQuery snippet will work independently for each one.
You could use something like
$("li img").click(
function(){
var imgSrc = $(this).attr("src");
$("img#main").attr("src", imgSrc);
}
);
Not tested but should work :)Shai.