.I do an example embled video: http://sachinchoolur.github.io/lightGallery/examples.html
and i have a problem with json! I can't load video when click image(div json) on website!!
But when I click image(div) slide video load complete and on this slide I can load all video(div and div json) !! Please help me when I click image(div json) video must be load.
this my code:
<script type="text/javascript">
$(document).ready(function () {
$.post("listvideojson.aspx", function (response) {
var listlinks = JSON.parse(response);
for (var i = 0; i < listlinks.length; i++) {
$("#video").append("<div data-src='" + listlinks[i].link + "'><img class='hinh' src='Images/149712_133340426820507_1784820870_n.jpg' /></div>");
}
});
});
</script>
<link href="CSS/lightGallery.css" rel="stylesheet" />
<script src="Scripts/lightGallery.js"></script>
This my html body:
<div id="video">
<div data-src="https://vimeo.com/110223381">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110223326">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110214790">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110214789">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
</div>
Related
As you can see i'm trying to get the data of an html tag which is an <img> tag and getting its src so when i drag and drop an image to my centerbox it goes to a specific page.
The problem is, it only goes to the first link in the first if statement which is "subpages/rice1.htm". Other else if wont work.
function doFirst(){
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
centerbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
var code = '<img id="img1" src="images/rice1.png">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
var code = '<img id="img2" src="images/rice2.png">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
var code = '<img id="img2" src="images/rice3.png">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
var code = '<img id="img2" src="images/rice4.png">';
e.dataTransfer.setData('Text', code);
}
//--------------drop FUNCTIONS -----------------------//
function dropped(e){
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text');
centerbox.getElementsByTagName("img")[0].style.width = "500px";
centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event){
}
//--------------button functions -----------------------//
function doFunction(){
if (confirm("Are you sure with the sauce?")) {
if(centerbox.src == "images/rice1.png") {
window.location.href = "subpages/rice1.htm";
}
else if (centerbox.src == "images/rice2.png") {
window.location.href = "subpages/rice2.htm";
}
else if (centerbox.src == "images/rice3.png") {
window.location.href = "subpages/rice3.htm";
}
}
}
function reloadPage(){
if (confirm("You sure want to remove sauce?")) {
window.location.reload();
}
}
window.addEventListener ("load", doFirst, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script src="drag.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<h5>SWEET AND SOUR</h5>
<img id="img1" src="images/sauce1.png">
</div>
<div class="col-md-3" id="2box">
<h5>GRAVY</h5>
<img id="img2" src="images/sauce2.png">
</div>
<div class="col-md-3" id="3box">
<h5>SALTED EGG</h5>
<img id="img3" src="images/sauce3.png">
</div>
<div class="col-md-3" id="4box">
<h5>ORIENTAL SAUCE</h5>
<img id="img4" src="images/sauce4.png">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-push-3 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</div>
<div class="row">
<center><h3>Are you sure with the sauce?</h3>
<button id ="sure" onclick="doFunction(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
<button id ="!sure" onclick="reloadPage(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</center>
</div>
</div>
<!-- hidden images here-->
<img id="s1" class="img5" src="images/rice1.png">
<img id="s2" class="img5" src="images/rice2.png">
<img id="s3" class="img5" src="images/rice3.png">
<img id="s4" class="img5" src="images/rice4.png">
<!--end of hidden images-->
</body>
</html>
Here is the whole updated codes, as stated im trying to make a drag and drag website for food customization.
Use double or triple = operator to compare, like,
if(centerbox.src == "images/rice1.png")
Single = is used to assign value.
function doFunction(){
if (confirm("Are you sure with the sauce?")) {
if(centerbox.src == "images/rice1.png") {
window.location.href = "subpages/rice1.htm";
}
else if (centerbox.src == "images/rice2.png") {
window.location.href = "subpages/rice2.htm";
}
else if (centerbox.src == "images/rice3.png") {
window.location.href = "subpages/rice3.htm";
}
}
}
Update :
You are trying to access the src attribute of a div not an img.
Create a new var of img tag, centerimg = document.getElementById("centerimg"); in doFirst() method.
The .src return the full url of the image source. Compare the image with full path.
Here is the updated snippet
function doFirst(){
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
centerbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
centerbox.addEventListener("drop", dropped, false);
centerimg = document.getElementById("centerimg"); //Add this
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
var code = '<img id="img1" src="images/rice1.png">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
var code = '<img id="img2" src="images/rice2.png">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
var code = '<img id="img2" src="images/rice3.png">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
var code = '<img id="img2" src="images/rice4.png">';
e.dataTransfer.setData('Text', code);
}
//--------------drop FUNCTIONS -----------------------//
function dropped(e){
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text');
centerbox.getElementsByTagName("img")[0].style.width = "500px";
centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event){
}
//--------------button functions -----------------------//
function doFunction(){
if (confirm("Are you sure with the sauce?")) {
if(centerimg.src == "http://stacksnippets.net/images/center.png") {
window.location.href = "subpages/rice1.htm";
}
else if (centerimg.src == "http://stacksnippets.net/images/center.png") {
window.location.href = "subpages/rice2.htm";
}
else if (centerimg.src == "http://stacksnippets.net/images/center.png") {
window.location.href = "subpages/rice3.htm";
}
}
}
function reloadPage(){
if (confirm("You sure want to remove sauce?")) {
window.location.reload();
}
}
window.addEventListener ("load", doFirst, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script src="drag.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<h5>SWEET AND SOUR</h5>
<img id="img1" src="images/sauce1.png">
</div>
<div class="col-md-3" id="2box">
<h5>GRAVY</h5>
<img id="img2" src="images/sauce2.png">
</div>
<div class="col-md-3" id="3box">
<h5>SALTED EGG</h5>
<img id="img3" src="images/sauce3.png">
</div>
<div class="col-md-3" id="4box">
<h5>ORIENTAL SAUCE</h5>
<img id="img4" src="images/sauce4.png">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-push-3 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</div>
<div class="row">
<center><h3>Are you sure with the sauce?</h3>
<button id ="sure" onclick="doFunction(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
<button id ="!sure" onclick="reloadPage(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</center>
</div>
</div>
<!-- hidden images here-->
<img id="s1" class="img5" src="images/rice1.png">
<img id="s2" class="img5" src="images/rice2.png">
<img id="s3" class="img5" src="images/rice3.png">
<img id="s4" class="img5" src="images/rice4.png">
<!--end of hidden images-->
</body>
</html>
your comparison is not correct.use double or triple equal mark.you are assigning values to src .
if(centerbox.src=="images/rice1.png"){ // same for other is/else blocks
read more about equal mark here
in your code you assign "images/rice1.png" to centerbox.src.and then you check if(centerbox.src). in javascript if("something") is evaluated to true so it never goes to else if blocks .
So i have an html document with a running some sample pic.
However I want this data to come from a javascript file? Is this possible?
This is what i have so far:
HTML
<link rel="stylesheet" type="text/css" href="FrontEnd.css"/>
<title> Test script for ticker </title>
</head>
<div class="container">
<body>
<div id="allTop">
<h1>
</h1>
<div class="clearfix">
<div class="forecast">
<div id="pic"></div>
<div id="forecast"></div>
<div id="temp"></div>
</div>
</div>
<div id="ticker">
<marquee>
<img
src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg"
Width=80 Height=80 alt="Milford Sound in New Zealand" />NewZealand
</marquee>
</div>
</div>
<div class="captured">
<div class="graph"></div>
</div>
</body>
</div>
</html>
js function
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i] + 'there should be an img coming in from an array here';
listitems.innerHTML = newListItem;
}
}
So I am confused on how can i append data into marquee tags from this function?
Simple append Data not over write
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i]; //'<img something /. etc etc
listitems[0].innerHTML += newListItem;
}
}
I want to load image after I click link and next show Exif data.
I have code like this.
<div class="row">
<div class="col-md-4 link">
<a id="link" href="http://77.45.18.218/Szprotawa/Zdjecia/teren-aparat/DSC02040.JPG" class="img-link">DSC02040.JPG</a>
</div>
<div class="col-md-4 image"></div>
<div class="col-md-4 exif"></div>
JS
$("a").click(function(event) {
event.preventDefault();
console.log($(this).attr("href"));
var self = $(this);
var link = $(this).attr("href");
var img = $("<img />").attr('src', link).load(function() {
self.parent().parent().children('.image').append(img);
$(this).exifLoad(function() {
self.parent().parent().children('.exif').append($(this).exifAll());
});
});});
And it is not working.
Someone may look where I have error?
Thanks.
You can load image like this :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function openImage(url)
{
var img = $('<img id="dynamic" />');
img.attr('src',url);
img.appendTo('.image');
}
</script>
</head>
<body>
<div class="row">
this is page
<div class="col-md-4 link">
<a id="link" href="javascript:openImage('http://77.45.18.218/Szprotawa/Zdjecia/teren-aparat/DSC02040.JPG')" >DSC02040.JPG</a>
</div>
<div class="col-md-4 image"></div>
<div class="col-md-4 exif"></div>
</body>
</html>
And than after you can load other <div class="col-md-4 exif"> in same function.
Here is jsfiddle
Hi I would like to add images to contentflow with a button. when you click the button function will be called and all the images will be loaded.
Here is my code.
<link rel='stylesheet' title='Standard' href='contentflow/cfstyles.css' type='text/css' media='screen' />
<script language='JavaScript' type='text/javascript' src='contentflow/contentflow.js'></script>
<script type='text/javascript' src='contentflow/jquery.min.js'></script>` <div style='width:400px;height:200px;' class='maincontent'>
<div id='contentFlow' class='ContentFlow'>
<div class='loadIndicator'><div class='indicator'></div></div>
<div id='adddiv' class='flow'>
//images should come to here
</div>
<div class='globalCaption'></div>
<div class='scrollbar'>
<div class='slider'><div class='position'></div></div>
</div>
</div>
<input type="button" value="Click me!" onclick="start();" />`
<script tyle='text/javascript'>
function start(){
var cf = new ContentFlow('contentFlow', {reflectionColor: '#000000'});
$(document).ready(function() {
for (var i=0; i<15; i++ ){
$("#adddiv").prepend(" <div class='item'><img onclick='start(" + i + ");' class='content' src='contentflow/pics/pic"+i+".png'/><div class='caption'>" + i + "</div></div>");
}
});
}
If I dont use button and function it diretly load all the images but if I want to load images with function it doesn't work.
What is the problem here?
Finally I made it work with following codes.
<div id='ajax_cf' class='ContentFlow'>
<div class='flow'> </div>
<div class='scrollbar'><div class='slider'><div class='position'></div></div></div>
<input type="button" value="get images!" onclick="getPictures();" />
var ajax_cf = new ContentFlow('ajax_cf');
function addPictures(){
var ic = document.getElementById('itemcontainer');
var is = ic.getElementsByTagName('img');
for (var i=0; i< is.length; i++) {
ajax_cf.addItem(is[i], 'last');
}
}
function getPictures() {
for (var i=0; i<15; i++ ){
$("#itemcontainer").prepend("<img onclick='' class='content' src='contentflow/pics/pic0.png'/>");`
}
addPictures();
}
At first sorry if i have some typing errors english is not my main language but i try to do my best to explain it at my best.
I am working on a test app with a note database.
It works fine with adding and deleting but there is a small problem...
At the moment that i add a note (on edit.html) and want to go back to the index.html page it is not going back.
i am working with multiple data-page-role pages so each page has his own id.
The code that i use for the note database:
index.html Header:
$("#homePage").live('pageinit', function() {
init();
});
index.html data-page-role
<div data-role="page" id="homePage" data-add-back-btn="true" class="noteclass">
<!-- HEader -->
<div data-role="header" >
<h1>Notitie Database</h1>
</div>
<!-- Main content div -->
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList"></ul><br />
</div>
<div data-role="content">
Voeg notitie toe
</div>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
Edit.html (here u can add/change/remove the notes)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div data-role="page" id="editPage">
<!-- HEader -->
<div data-role="header">
<h1>Write Note</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#Delete').click(function() {
DeleteNote($('#noteId').val());
});
$('#addNote').click(function() {
var data = {title:$("#noteTitle").val(),
body:$("#noteBody").val(),
id:$("#noteId").val()
};
saveNote(data);
});
});
</script>
<div data-role="content">
<form id="editNoteForm" method="post">
<input type="hidden" name="noteId" id="noteId" value="">
<div data-role="fieldcontain">
<label for="noteTitle">Title</label>
<input type="text" name="noteTitle" id="noteTitle">
</div>
<div data-role="fieldcontain">
<label for="noteBody">Note</label>
<textarea name="noteBody" id="noteBody"></textarea>
</div>
<div data-role="fieldcontain">
<button id="addNote">Opslaan</button>
</div>
</form>
<button id="Delete">Verwijder</button>
</div>
Ga terug
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
</body>
</html>
And here is the backend code that i use for the note database
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phoneready();
}
function setupTable(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)");
}
function getEntries() {
dbShell.transaction(function(tx)
{
tx.executeSql("select id,title,body, updated from notes order by id asc", dbErrorHandler, renderEntries)
}, function(){ alert ("Error getentries");
});
}
function renderEntries(tx,results){
if (results.rows.length == 0) {
$("#mainContent").html("<p>Je hebt nog geen notities.</p>");
} else {
var s = "";
for(var i=0; i<results.rows.length; i++) {
s += "<li><a href='edit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).title + "</a></li>";
}
$("#noteTitleList").html(s);
$("#noteTitleList").listview("refresh");
}
}
function saveNote(note) {
//Sometimes you may want to jot down something quickly....
if(note.title == "") note.title = "[Geen Titel]";
dbShell.transaction(function(tx) {
if(note.id == "")
{
tx.executeSql("insert into notes(title,body,updated) values(?,?,?)",[note.title,note.body, new Date()]);
}
else
{
tx.executeSql("update notes set title=?, body=?, updated=? where id=?",[note.title,note.body, new Date(), note.id]);
}
}, function(){ alert ("Error savenote");},
function()
{
window.navigator.location("index.html#homePage");
});
}
function DeleteNote(id){
dbShell.transaction(
function(tx)
{
tx.executeSql('Delete FROM notes where id=' + id);
},
function(){ alert ("Error deletenote");},
function(err)
{
window.navigator.location("index.html#homePage");
});
}
function phoneready(){
dbShell = window.openDatabase("SimpleNotes", 2, "SimpleNotes", 1000000);
setupTable();
}
function init(){
getEntries();
//edit page logic needs to know to get old record (possible)
$("#editPage").live("pagebeforeshow", function() {
//get the location - it is a hash - got to be a better way
var loc = window.location.hash;
if(loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?")+1,loc.length);
var noteId = qs.split("=")[1];
//load the values
dbShell.transaction(
function(tx) {
tx.executeSql("select id,title,body from notes where id=?",[noteId],function(tx,results) {
$("#noteId").val(results.rows.item(0).id);
$("#noteTitle").val(results.rows.item(0).title);
$("#noteBody").val(results.rows.item(0).body);
});
}, dbErrorHandler);
}
});
}
As u can see at saveNote and on deleteNote i call the function window.navigator.location("index.html#homePage");
I did this as far as i tried with $.mobile.changePage("index.html#homePage"); it will go back but then it won't run the init(); function at the header script.
I hope i explained it all correct and if there are any questions please let me know.
I will try then to do my best at explaining it.
edit:
More information:
At first thank you for your answer, i got multiple data-role-pages.
A extra example:
<div data-role="page" id="page5" data-add-back-btn="true">
<!-- Header -->
<div data-role="header" >
<h1>Locatie</h1>
</div>
<!-- Main content div -->
<div data-role="content">
<p id="geolocation" onClick="onDeviceReady()">Op zoek naar uw locatie ...</p>
<img src="" id="map" width="100%" height="" />
<h4>Omgeving</h4>
<img src="" id="map2" width="100%" height="" />
</div>
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
You are trying to change page with deep link "index.html#homePage" .
JqueryMobile does not support that. When you pass a file, he will load ONLY the first page of that file.
This means that when you pass "index.html#homePage", he'll only consider the "index.html" and load the first page on that file.
I don't know it for sure, but if in your index.html file only have the "homePage", change function window.navigator.location to:
$.mobile.changePage("index.html")
And of course do the same for the anchor tag .
I use:
window.location = "#home";