I am working with photoswipe and seen the examples available but there's nothing dynamic there.
Has anyone managed to get photoswipe grabbing images from Flickr or other feed or know of any examples anywhere?
Here's the examples url:
[http://www.photoswipe.com/latest/examples/04-jquery-mobile.html][1]
I created a script that uses the Flickr API and Photoswipe to show a flickr set as a slideshow. It's not fully polished yet, but very simple and usable. Just enter your flickr api key and set id, and it does the rest.
https://github.com/lyoshenka/photoswipe-flickr
I have this working on my blog (and blogged about how it works briefly here). I'll skip over the basic installation of photoswipe, which you can get from their tutorials. Here's the code I used to access flickr:
<script type="text/javascript" language="javascript"
src="http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&
api_key=[YOUR APRI KEY]&photoset_id=[YOUR PHOTOSETID]&format=json&
extras=original_format"></script>
Place this in your document in the appropriate spot. For me, that's just in a body div.
The more complicated part is below -- some javascript to handle the JSON feed from flickr. This was adapted from an older tutorial from viget.com. Note that I've adapted it to set a variable to detect retina vs non-retina displays and also to automatically count the number of photos returned from flickr. Create a file with the script below and link to it on your PhotoSwipe page(s).
function jsonFlickrApi(rsp) {
//detect retina
var retina = window.devicePixelRatio > 1 ? true : false;
//makes sure everything's ok
if (rsp.stat != "ok"){
return;
}
//count number of responses
var num = rsp.photoset.photo.length;
//variables "r" + "s" contain
//markup generated by below loop
//r=retina, s=standard
var r = "";
var s = "";
//this loop runs through every item and creates HTML that will display nicely on your page
for (var i=0; i < num; i++) {
photo = rsp.photoset.photo[i];
//create url for retina (o=original, bt=big thumb) and standard (st=standard thumb,
//so= flickr "large")
o_url = 'http://farm'+ photo.farm +'.staticflickr.com/'+ photo.server +'/'+
photo.id +'_'+ photo.originalsecret +'_o.jpg';
bt_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+
photo.id +'_'+ photo.secret +'_q.jpg';
st_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+
photo.id +'_'+ photo.secret +'_s.jpg';
so_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+
photo.id +'_'+ photo.secret +'_b.jpg';
r += '<li><img alt="'+ photo.title +'" src="'+ bt_url +'" title="Click to view '+ photo.title +' full size"/></li>';
s += '<li><img alt="'+ photo.title +'" src="'+ st_url +'" title="Click to view '+ photo.title +' full size"/></li>';
}
//should be self explanatory
if (retina){
q = '<div id="MainContent"><ul id="Gallery" class="gallery">'+ r +' </ul></div>'
}
else{
q = '<div id="MainContent"><ul id="Gallery" class="gallery">'+ s +' </ul></div>'
}
//this tells the JavaScript to write everything in variable q onto the page
document.writeln(q);
}
That's basically it. It writes the contents of q into wherever you placed the above <script> into the page. q contains either a 'retina' thumbnail and image or a 'standard' thumbnail and image. Its a little kludgy here and there, but works fine.
It should be pretty trivial to customize to your specific needs and/or remove retina detection, etc.
Related
I want to display via document.getElementById from an external javascript file a compilation of links to social networks depending on the language version of my website. The problem is it works perfectly for the first ID ("sociallv") but doesn't work for others ("socialen" and "socialru") if I use them separately on a webpage. What should I change?
/* Social networks start */
var start = "<div class='social justify-content-between'>"
var end = "</div>"
var facebook = "<a href='https://www.facebook.com/maggitekstils.lv' title='Facebook' rel='noreferrer' target='_blank'><div class='social-button facebook'></div>";
var draugiem = "<a href='https://www.draugiem.lv/maggitekstils.lv' title='Draugiem' rel='noreferrer' target='_blank'><div class='social-button draugiem'></div>";
var youtube = "<a href='https://www.youtube.com/channel/UC2H9dhm1Nzw3i4wveNTgHnQ/playlists' title='YouTube' rel='noreferrer' target='_blank'><div class='social-button youtube'></div></a>";
document.getElementById("sociallv").innerHTML = start + facebook + draugiem + youtube + end;
document.getElementById("socialen").innerHTML = start + facebook + youtube + end;
document.getElementById("socialru").innerHTML = start + facebook + youtube + end;
/* Social networks end */
<div class="social-media" id="socialen"></div>
Did you check if there are any errors in your JS Console ?
For Chrome: https://developers.google.com/web/tools/chrome-devtools/open
For Firefox: https://developer.mozilla.org/en-US/docs/Tools/Web_Console
I supspect that the execution of your Javascript is abborted because you're trying to set a value for a property on an object which does not exists and therefore the blocks
document.getElementById("socialen").innerHTML = start + facebook + youtube + end;
document.getElementById("socialru").innerHTML = start + facebook + youtube + end;
are never reached. You should always do a check if the queried element exists or not:
// ...
if ( document.getElementById("socialen") ) {
document.getElementById("socialen").innerHTML = start + facebook + youtube + end;
}
// ...
In the html provided, you only have an element with id socialen which is why when you set the innerHTML of socialen it works. However socialru and sociallv aren't html elements therefore its not actually setting anything.
If you add the following to your html, you should get the expected result
<div class="social-media" id="sociallv"></div>
<div class="social-media" id="socialru"></div>
I have a script that generates product "cards" on my website. These product cards contain images of the products. When they initially load, they have tiny-sized placeholder images to indicate that the actual product images are still loading (lazy-loading).
However, when I check the network activity, the placeholder image [blank.gif] is being downloaded and re-downloaded for every instance of it on the page. This impacts the loading of the page, which cuts into the time saved with the lazy-load script.
screenshot of images loading in the network tab of dev console
Currently, the cards' HTML is assembled into a variable then it's appended to its respective place in the body of the page's HTML, one at a time. See Below
How can I make it so that the image only loads from the server once, and shows up in the multitude of places it belongs?
Card Code:
// Simplified for Stack Exchange
// A JSON file contains activeCards which this script pulls data from
var cardImgs = '';
for (let i of activeCards) {
cardImgs = "<img class='soloImg' src='images/blank.gif' data-src='images/" + i.img + "' alt='" + i.imgAlt + "' />";
// Builds card HTML from elements above
card = "<div class='card' id='" + i.id + "'>" +
"<div class='cardImagesCont'>" + cardImgs + "</div>" +
"<h2>" + i.title + "</h2>" +
"<h4 class='itemDesc'>" + i.description + "</h4></div>";
// Adds card to section
$('.cardSection').append(card);
}
Lazy Load Code:
function lazyload() {
for (let i of $('img[data-src]')) {
$(i).attr('src', $(i).attr('data-src'));
}
}
I'm self-taught, so please don't be too cruel if there's something shockingly wrong with this code (but do let me know)
Using WordPress 4.5.2 , I am trying to add Gallery Metabox to post using this solution but in js part I am getting this error
Uncaught TypeError: Cannot read property 'url' of undefined
on
attachment.sizes.thumbnail.url
not sure this is JavaScript or WP issue but can you please let me know why this is happening and how I can fix it?
js:
file_frame.on('select', function() {
var listIndex = $('#gallery-metabox-list li').index($('#gallery-metabox-list li:last')),
selection = file_frame.state().get('selection');
selection.map(function(attachment, i) {
attachment = attachment.toJSON(),
index = listIndex + (i + 1);
var thumb = attachment.sizes.thumbnail.url;
alert(thumb);
$('#gallery-metabox-list').append('<li><input type="hidden" name="vdw_gallery_id[' + index + ']" value="' + attachment.id + '"><img class="image-preview" src="' + attachment.sizes.thumbnail.url + '"><a class="change-image button button-small" href="#" data-uploader-title="Change image" data-uploader-button-text="Change image">Change image</a><br><small><a class="remove-image" href="#">Remove image</a></small></li>');
});
});
The solution is very simple and it worker for me.
The error says that there are no images cropped as thumbnails.
Go go Settings -> Media in your WP admin panel and set the thumbnail size.
Than you have to regenerate the images that were already uploaded before with Force Regenerate Thumbnails plugin or just upload new images.
Problem
I am trying to display the reviews of a Restaurant using Yelps API. I copied Smashing Magazines version of implementing API from their jQuery ebook. The problem is that using this method there are two stores being queried because the previous owners had the same phone number. Yelp can use phone numbers to query reviews and ratings. I need only the currently open store's reviews to display. I want to do it by some how showing Yelp's node elemnt ID. Each store has a unique identifier according to Yelps API and uses node element ID. The ID of the store i want to solely display is ID="Y6D43boKItksYx_d-RQL4g"
The Code Looks Like:
function showData(data) {
$.each(data.businesses, function(i,business){
// extra loop
var bizContent = '<p><img src="' + business.rating_img_url + '" img=""/><br>'+ business.review_count + ' reviews from Yelp.com</p>';
$(bizContent).appendTo('#yelpAVG');
$.each(business.reviews, function(i,review){
var content = '<div class="comments-block"><p>Posted by ' +review.user_name + ' on ' + review.date + 'via Yelp.com';
content += '<img src="' + review.user_photo_url + '" img=""/>';
content += '<p><img src="' + review.rating_img_url + '" img=""/><br>';
content += review.text_excerpt + '</p>';
content += '<p>Read the full review<br>';
$(content).appendTo('#yelpReviews');
});
});
}
function writeScriptTag(path) {
var yelpScript=document.createElement('script');
yelpScript.type='text/javascript';
yelpScript.src=path;
$("body").append(yelpScript);
}
$(document).ready(function(){
// note the use of the "callback" parameter
writeScriptTag( "http://api.yelp.com/phone_search?"+
"&categories.name=cafe"+
"&phone="+"(408) 292-2070"+
"&ywsid=Iua-78eDnxy0DTqm8I4mDw"+
"&limit=1"+
"&callback=showData");
});
Im a little new to jQuery so I wouldn't know where to begin or what I should start with to display queried results that only have
`ID="Y6D43boKItksYx_d-RQL4g"`
ShowOnly="id":"Y6D43boKItksYx_d-RQL4g" or something similar.
Thanks For Reading.
You can't with API vsersion 1.
but
With APIv2 you can query a specific business by id:
http://www.yelp.com/developers/documentation/v2/business
Some sample code to help you get started is available on github:
https://github.com/Yelp/yelp-api/blob/master/v2/js/business.html
I have this daily image rotation script, which works great. I need the images to be clickable though. Any help is appreciated.
<!-- Begin
today = new Date();
day = today.getDay();
arday = new Array
("http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mp_mpl.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mph.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mmp.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mep.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mst.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_s.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_maxp.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mpt.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mta.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_me.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_sm.jpg");
document.write("<img src='" + arday[day] + "'>");
// End -->
</SCRIPT>
Why don't write an <a> element as well?
document.write('<a href="LINK_HERE" title="TITLE_HERE"><img src="' + arday[day] + '"><\/a>');
Clickable to where?? You've got to add a url to each "row" in addition to the img src.
Eg instead of each row being just "http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg", do instead:
{ img: "http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg",
url: "LINK GOES HERE" },
Then the last line can do:
document.write('<img src="' + arday[day].img + '" />');
The example below creates a link around your image, hjust change the href attribute's value :
document.write("<a href='#'><img src='" + arday[day] + "' border='0'></a>");
Few general tips:
Always declare your variables (var today = ..., not just today = ...)
Drop new Array in favor of more concise (and just as compatible these days) "[" and "]" syntax.
Don't repeat host name in array of links. It's a maintenance nightmare and a waste of bandwidth.
Drop HTML comments from within your script contents. Browsers that need them are obsolete by now.
Always provide "alt" attribute on your images. When you wrap them with anchor, don't forget to give title to anchor.