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.
Related
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
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.
So I am working to make a change on this site. http://www.kbduct.com . One the site there is a png file of a transparent united states logo on the front. I had to add a small awfs logo banner to it and have the viewer be able to click on it so that it can lead to a different site. I added the anchor tags to these items but nothing happens wen you click on it. Heres the index file and the external file for the image.
BTW, I didn't build this site. Im helping to maintain it for the time being.
INDEX:
<?php include('inc/default.php');
$pageTitle = "The Nations Source For Industrial Ducting, Ducts and Ductwork Components - KB Duct";
$pageDisc = "KB Duct is the Nation's source for industrial duct, ducting components and ductwork fittings and supplies. We offer custom built solutions for your industrial needs.";
$pageKeys = "duct, ductwork, ducting, duct work, commercial ducting, industrial ducting, custom ductwork, ductwork supplies, ducting accessories, duct fittings";
?>
<!doctype html>
<html>
<?php include('inc/head.php'); ?>
<body>
<div id="sb-site">
<?php include('inc/maximage.php'); ?>
<?php include('inc/header.php'); ?>
<div class="mainarea">
<a href="http://awfsfair.org/">
<div id="eBanner" style=" position: absolute; right: 380px; top: 310px;">
<?php /*?> <script type='text/javascript' src='http://libs.a2zinc.net/Common/JS/10.6.0.0/a2zWidget.js'></script><script type='text/javascript' id='exWidget'>new a2z.Widget('dGbJ%2fQfPqUA4s%2fDNrIc%2fzt5xiq%2fL4ZoFjVXmdUEcJutOcD9ggxZSCZyU8MZ6cQu6',40297,'http://libs.a2zinc.net/Common/Widgets/ExhibitorBadge.aspx',31,201133,330,200).render();</script>
<?php */?>
</a>
</div>
<div class="wrapper">
<?php include('inc/industry.php'); ?>
<?php include('inc/catatypes.php'); ?>
<div id="mob-only">
<?php include('inc/mobslideup.php'); ?>
</div>
</div>
</div>
<?php include('inc/footer.php'); ?>
</div>
<?php include('inc/mob-menu.php'); ?>
</body>
</html>
MAXIMAGE.PHP:
<div id="maximage">
<div>
<img src="img/Custom-Ductwork-Clamp-Together-Ducting-Shiny-Ducts-BG.jpg" alt="KB Duct is the nation's source for clamp together and flanged industrial ducting and duct parts." />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png" alt="KB Duct offers custom fabricated industrial ducting solutions.">
</div>
</div>
<div>
<img src="img/shinyduct.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<!-- <div>
<img src="img/kbduct-production.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png">
</div>
</div>-->
<div>
<img src="img/plasma.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<div>
<img src="img/welding.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<!-- <div>
<img src="img/clamp.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png">
</div>
</div>-->
<div>
<img src="img/tunnel.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
MAXIMAGE CSS ID:
#maximage {
display:block;/* Only use this if you fade it in again after the images load */
position:fixed !important;
z-index:-1;
CSS IN SLIDE CONTENT:
.in-slide-content {
color:#333;
float:right;
font-family:'Helvetica Neue', helvetica;
font-size:60px;
font-weight:bold;
right:20px;
margin:40px;
padding:20px;
position:absolute;
top:20px;
width:700px;
z-index:9999; /* Show above .gradient */
text-shadow: 0 1px 0 #fff;
-webkit-font-smoothing:antialiased;
}
I did some R&D got some thing. May be this help you
There is a id eBanner change inline styling to
position: absolute;
right: 269px;
top: 141px;
z-index: 9999;
height: 100px;
width: 185px;
border: 2px solid red;
Inside this div there is and anchor tag add folloing style
display: block;
width: 181px;
height: 100px;
Once you check it works then you can remove red border
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'];
so I am trying to get my posts to be in a grid layout. I will try and demonstrate best I can with where I am at. So the posts are going to want to be in mosaic tiles. I am using this to achieve it:
http://sapegin.github.io/jquery.mosaicflow/
Now because I am building this locally it is difficult to show a live example. I have placed the files within my Wordpress theme and the html page works as per the files to the mosaic demo, yet when I bring the exact same code into a Wordpress page all of the images just sit down the left hand side and not tiling out.
I have removed my style sheets (it is blank anyway) so there is no conflict there. I have tried moving the link to the jQuery and the Javascript files but still no idea? Perhaps I am missing something?
so here is my homepeage code:
<?php get_header(); ?>
<!--<div id="site-description"><?php bloginfo( 'description' ); ?></div>-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:"Helvetica Neue", Arial, sans-serif;
}
.mosaicflow__column {
float:left;
}
.mosaicflow__item {
position:relative;
}
.mosaicflow__item img {
display:block;
width:100%;
max-width:500px;
height:auto;
}
.mosaicflow__item p {
position:absolute;
bottom:0;
left:0;
width:100%;
margin:0;
padding:5px;
background:hsla(0,0%,0%,.5);
color:#fff;
font-size:14px;
text-shadow:1px 1px 1px hsla(0,0%,0%,.75);
opacity:0;
-webkit-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
-moz-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
-o-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}
.mosaicflow__item:hover p {
opacity:1;
}
</style>
<div class="mosaicflow" data-item-height-calculation="attribute">
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
<p>Dessi the Dachshund</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-24_5D_2066_Artem_Sapegin.jpg" alt="">
<p>Tsiri on Baltic Sea</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3178_Artem_Sapegin.jpg" alt="">
<p>Ciyar the Saluki</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2551_Artem_Sapegin.jpg" alt="">
<p>Tsiri Having Fun by the Sea</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2323_Artem_Sapegin.jpg" alt="">
<p>Dessi Meets the Sea</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-05-19_5D_9670_Artem_Sapegin.jpg" alt="">
<p>Tsiri the Saluki</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-20_5D_1165_Artem_Sapegin.jpg" alt="">
<p>Dessi on a Waterfall</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2011-05-28_5D_4035_Artem_Sapegin.jpg" alt="">
<p>Dessi in Dandelion Field</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-12-09_5D_3758_Artem_Sapegin.jpg" alt="">
<p>New Year Postcard from Tsiri and Ciyar</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3422_Artem_Sapegin.jpg" alt="">
<p>Beautiful Afghan Hound Girl</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3414_Artem_Sapegin.jpg" alt="">
<p>Running Ciyar and Afgan Girl</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2378_Artem_Sapegin.jpg" alt="">
<p>Dessi Walking on a Sea Shore</p>
</div>
</div>
<script src="jquery.mosaicflow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--<?php get_sidebar(); ?>-->
<?php get_footer(); ?>
You need to call jQuery before you call the mosaic flow library, that should fix it.