This is my code so far, It downloads a small 240px image. Can I get the full sized pic to create a lightbox?
<script>
jQuery(function(){
var apikey = 'xxxxx';
var userid = 'xxxx';
jQuery.getJSON('https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key='+apikey+'&user_id='+userid+'&format=json&jsoncallback=?',
function(data){
jQuery.each(data.photos.photo, function(i,item){
var purl = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
var pid = item.id;
var container = '<img src='+ purl+' />';
console.log(container);
jQuery(container).appendTo('#images');
});
});
});
</script>
Sure thing! You can use the API flickr.photos.getSizes to get a list of all the sizes available. Make one Ajax call to flickr.photos.getSizes, pick the largest one from that list, and then make your Ajax call for its URL (you won't have to stitch the URL together as you do in your original code).
Related
I'm making a holiday blessing generator for client.
The final output goes to a div with an id="BRHBresults".
From that div I'm making a canvas and converting it to image,
I've managed to make the onclick function to download the image(just to make sure the result was correct), however what I need the onclick to do is,
upload the image to wordpress library and make a new post with this image as post_thumbnail.
I get an error:
"414 (Request-URI Too Large)"
So far I have come up with this:
Link to the page: [http://www.benedict.co.il/%D7%9E%D7%97%D7%95%D7%9C%D7%9C-%D7%91%D7%A8%D7%9B%D7%95%D7%AA/
]
Javascript/JQuery
$(".BRHshareToFB1").click(function(){
html2canvas([document.getElementById('BRHBresults')], {
onrendered: function (canvas) {
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
var alink = data ;
//$('.BRHshareToFB2').attr('href', alink);
//$('.BRHshareToFB2').attr('download', 'filename.jpg');
//dataUrl = canvas.toDataURL("image/png");
alink = data.replace(/^data:image\/(png|jpg);base64,/, "");
$.post("/send.php?data="+alink);
}
});
});
PHP from send.php file
<?php
$dir = getcwd();
$now = date("U");
$imgstring = $_POST['data'];
$imgstring = base64_decode($imgstring);
file_put_contents("$dir/wp-content/uploads/blessing-$now.png", $imgstring);
?>
What am I missing? Please help! :)
I am using Metalsmith to generate a static site from a markdown file.
The people editing the markdown file will write: {{{link "docs/file.docs"}}} and they expect a link on the site with that file (relative link)
The helper is simple, I tested and it is working:
handlebars.registerHelper('link', function(path) {
var url = handlebars.escapeExpression(path);
return new handlebars.SafeString(
"<a href='" + url + "'>" + url + "</a>"
);
});
But how can I add this helper and use it in my metalsmith configuration?
Here is a summarised example.
index.md:
etc etc link to the page is {{{link "docs/file.doc"}}}
I want with a simple make the following part of the html to be created:
etc etc link to the page is <a href='docs/file.doc'>docs/file.doc</a>
I found the answer here: https://segment.com/blog/building-technical-documentation-with-metalsmith/
Here is my index.js config for Metalsmith:
var Metalsmith = require('metalsmith');
var markdown = require('metalsmith-markdown');
var permalinks = require('metalsmith-permalinks');
var handlebars = require('handlebars');
var inplace = require('metalsmith-in-place');
handlebars.registerHelper('link', function(path) {
var url = handlebars.escapeExpression(path);
return new handlebars.SafeString(
"<a href='" + url + "'>" + url + "</a>"
);
});
Metalsmith(__dirname)
.metadata({ title: "Static Site" })
.source('./src')
.destination('/var/www')
.use(inplace({ engine: 'handlebars', pattern: '**/*.md' }))
.use(markdown())
.build(function(err, files) {
if (err) { throw err; }
});
Currently I am stuck I want to return the title, plot and poster using themoviedb api I have no idea how to start the coding for this
Currently when i run a search the information is display in the console log of the browser i want to take that information and style it into a table format nothing fancy just the title and poster need help no clue where to start
doc site here http://docs.themoviedb.apiary.io/#get-%2F3%2Fsearch%2Fmovie
<html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var url = 'http://api.themoviedb.org/3/',
mode = 'search/movie',
input,
movieName,
key = '?api_key=My API KEY HERE';
$('button').click(function() {
var input = $('#movie').val(),
movieName = encodeURI(input);
$.ajax({
url: url + mode + key + '&query='+movieName ,
dataType: 'jsonp',
success: function(data) {
console.log(data);
}
});
});
});
</script>
</head>
<body>
<input id="movie" type="text" /><button>Search</button>
</body>
</html>
output looks like this it returns objects under a movie title in his chase 300
error when running each staement
Something like this:
$.ajax({
url: url + mode + key + '&query='+movieName ,
dataType: 'jsonp',
success: function(data) {
var table = '<table>';
$.each( data.results, function( key, value ) {
table += '<tr><td>' + value.original_title + '</td><td>' + value.release_date + '</td></tr>';
});
table += '</table>';
$('.myelement').html(table);
}
});
You don't read from the console. It's just for outputting debug information. The AJAX call basically returns an JavaScript object (whose structure you can see in the the console).
Access the data from it just like from any other JavaScript object (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects if you need to learn how) and work with that.
EDIT: If you need to know how to display the data on the web page, you need to learn about the DOM. See for example: http://www.elated.com/articles/javascript-dom-intro/
I'm using the following to load posts into a index page of a wordpress site. The problem is when it gets to the last page and there are no more posts to load. Its just keeps reloading the last page.
Any ideas of how I might stop this from happening? Thanks.
var $content = '#content';
var $nav_wrap = '.navigation';
var $anchor = '.navigation a.next';
var $text = 'Load More';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');
$('#almc-load-more').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), '', function(data) {
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
$next_href = $($anchor, data).attr('href'); // Get the new href
$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll
$($nav_wrap).before($new_content); // Append the new content
$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('#almc-load-more').attr('href', $next_href); // Change the next URL
$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
});
});
Above code taken from here: http://kaspars.net/blog/wordpress/jquery-script-for-loading-more-posts
You could add some code to check if the new href is different than the current href, and then only try to add a new post if they're different. Then, if they aren't, you could have a message saying there are no more posts.
var lastLink;
$('#almc-load-more').click(function(e) {
if ( $anchor == $('.navigation a.next').last() ) {
lastLink = 1;
}
if (lastLink == 1) {return} else {
...
}
...
After the comment from Mr. Mayers (Thanks) I gave up on the code and used this tutorial:
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Has / does everything I needed.
I try do dynamic gallery with jCarousel and Ajax.
My thumbs are loading from '.txt' file.
I try do something like this: If click the thumb body background are change <--- this action for all thumbs but different backgrounds...
But if I try add dynamic url for differents files, it isin't work, If I change + url + for accurate path it work, all picture loaded this same picture from the path - it is understandable ....
below my code
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="200" height="75" alt="" border="0" class="newbg" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 2,
itemLoadCallback: mycarousel_itemLoadCallback
});
$('.newbg').live("click", function(){
$('body').css('background-image', 'url(' + url + ')');
});
});
anybody has an idea as change this code for correct effects...?
I add something like this:
$('.newbg').livequery("click", function(){
var url = $(this).attr("src").replace("_t", "");
var img = new Image();
img.onload = function() {
};
img.src = url;
$('body').css('background-image', 'url(' + url + ')');
});
And it's work correct, thank...
Question can be close...