Develop Reference

Image processing issue

I am using javascript/jQuery to manage a slide show that can handle random occurrences of portrait or landscape images.
The code works fine if there is an "alert" in the first function called to process a loaded image.
It fails without the alert.
I am testing locally and the images are loaded into an array when the page loads.
The files are quite small. I suspect however that the issue is one of timing.
Below is the function where the Alert works. I don´t exactly understand what the code is doing as I am new to jQuery. It would help to know what the function is doing and a suggestion of how to fix the issue. I can post a working sample if it would help.
function FixImages(fLetterBox) {
$("div.aspectcorrect").each(function (index, div) {
var img = $(div).find("img").get(0);
alert("FixI")
FixImage(fLetterBox, div, img);
});
}

I suspect that you might be passing in the wrong arguments for the .each() callback. If you want div to refer to the element that is currently being looked at in each iteration, using $(this) should work:
function FixImages(fLetterBox) {
$("div.aspectcorrect").each(function (index) {
var img = $(this).find("img").get(0);
FixImage(fLetterBox, div, img);
});
}

How to fill a div that is loaded from another html page

I'm trying to load a div from another html page, then fill it with values from my main html page.
My div is correctly loaded and displayed, but it seems like it doesn't want to fill up. Here's what I have so far :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div");
$("#ag_pub_panneau_detail_html").show();
});
So when I click on the "valider" button, my div is loaded and displayed, so far so good.
And here's where I'm struggling, I tried this :
if ($('ag_pub_panneau_detail_html').is(':visible')) {
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
}
but the div stays blank. So I tried this instead :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div", fillDiv());
$("#ag_pub_panneau_detail_html").show();
});
function fillDiv(){
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
}
But I get the same result. So I tried something else :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div");
$("#ag_pub_panneau_detail_html").show();
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
});
I was thinking that since the .show() works well, I could add my line below it, but it doesn't seem to execute either.
So I used to think that this line :
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
Was wrong but when I execute it from the Chrome console, the field is correctly filled... I don't know what's happening, and I'm out of ideas for my issue.
Is there something I'm doing wrong ?
I can provide more code/details if you want to, just ask me
Any help would be greatly appreciated !

I managed to get it working, what I did is that I created a js file for the Ag_pub_panneau_detail.html page (the one that is loaded) in which I just wrote :
$(document).ready(function()
{
$('#ag_pub_panneau_entityid').val(localStorage.getItem("ag_pub_panneau_entityid"));
});
And now it works like a charm :)
By the way, can I know why I have those downvotes on my question ?
Anyway thanks for your help !

How to add a "pin it" button dynamically?

I'm trying to optimize my Wordpress install - and one of the culprits I'm seeing, is the "Pin It" button widget for Pinterest. I'm now trying to find a way to dynamically load the JS code (when they initially hover over the button), and then apply it to the page. So far I've only managed to get this far:
jQuery(document).on("mouseenter click",'.pinItSidebar', function() {
jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
// do something here?
});
});
I can't seem to find a function that I can call (as a callback, after the JS is loaded). Obviously I will only do this once per page load (the above is just a very basic version at the moment)
Does anyone have any suggestions on how I can achieve this? The end game of how I want it to function, is with:
Working solution:
Here is a working solution I've now got, which will allow you to load the pinterest stuff ONLY when they click the button (and then trigger the opener as well). The idea behind this, is that it saves a ton of Pinterest JS/CSS / onload calls, which were slowing the page down.
jQuery(document).on("click",'.pinItSidebar', function() {
if (typeof PinUtils == "undefined") {
jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
PinUtils.build();
PinUtils.pinAny();
});
} else {
PinUtils.pinAny();
}
});
...and just call with:
foo
Hopefully this helps save someone else some time :)
Extra tweak: I'm just playing around, to see if I can make this even more awesome :) Basically, I want to be able to decide which images are pinnable. Below this will do that for you:
jQuery("img").each(function() {
if (jQuery(this).data('pin-do')) {
// its ok, lets pin
} else {
jQuery(this).attr('nopin',"1");
}
});
All you need to do to make an image pinnable, is have the data-pin-do="1" param set the images you want to allow them to share :)

Image viewer/editor with CamanJS

I am trying to make a simple image viewer application using Electron and with the possibility to edit images. I am using CamanJS for image manipulation effects but I have a small problem. When I load the folder with all images, I can scroll through them, also, I can apply some filters to image number 3 for example, save it and scroll no next one. But when I am trying to edit another image, say number 5, when I press the button it renders the image nr 3 and apply the effects to image nr 3. I have tried to resolve this bug but with no success. Can someone help me? Bellow is some code.
Here is the image on the "web page"
<canvas id="currentImage" class="img-thumb center"></canvas>
I have an array of indexes with images from the folder and I iterate through it to change the image that is displayed. Below is the function how I change the image:
var onPreviousClick = function() {
var currentImageId = $currentImage.data('currentIndex');
if (currentImageId > 0) {
showImage(--currentImageId);
}
};
And this is how I apply the Lomo effect to the image:
$lomobtn.on('click', function() {
Caman('#currentImage', function() {
this.lomo().render();
});
});
I suppose that is something related to this. First time when I press the button it references to the first image, and second time when I press the button it also references to the first image.
UPDATE
I find out that I have to use the function reloadCanvasData() to refresh the data from canvas, but I can't find out how to use this function. https://github.com/meltingice/CamanJS/blob/master/src/core/caman.coffee#L387-L392
Can someone help me to use this function? Tried different methods to call this function and I receive and error.

This is a few months old question, but hopefully still relevant for you or someone else.
I had the same issue. Just use it like this:
$lomobtn.on('click', function() {
Caman('#currentImage', function() {
this.reloadCanvasData() // <--- here, before you apply your filter
this.lomo().render();
});
});

Chrome Extensions : Get all images on page

After hours of reading in the Google-Documentations and Stackoverflow I decided to post this question. There already are some similar ones but I haven't found a answer that really helped me.
However, I'm trying to get a list of all images embeded on a page to use it in the Chrome extension. I've tried to do it with simle Javascript (document.images) but didn't get any entries. After some research I found out, that the only way to read elements from a page is using a EventListener. The function should be started using the chrome context-menu.
chrome.contextMenus.create({
title: "ExampleFunction",
contexts:["page"],
onclick: exampleFunction,
});
This part works fine, but how do I get the images after calling the function?
I've tried some ways using eventlisteners and finally got this function:
function downloadImages(info,tab) {
alert('o');
chrome.extension.onRequest.addListener(function(result){
for (var i in result.images) {
allImages.push(result.images[i]);
}
alert(allImages[0]);
});
}
The first alert works perfect but everything else is just doing nothing.

First you have to actually get the images, and the way to do that is to use a content script. I am assuming that your onclick was a typo and that you have this instead:
chrome.contextMenus.create({
title: "ExampleFunction",
contexts:["page"],
onclick: downloadImages,
});
Then you would want to have something like this:
function downloadImages(info,tab) {
alert('o');
chrome.tabs.executeScript(tab.id,{file:"script.js"});
}
chrome.runtime.onMessage.addListener(function(message){
//In case you want to do other things too this is a simple way to handle it
if(message.method == "downloadImages"){
message.images.forEach(function(v){
allImages.push(v);
});
alert(allImages[0]);
}
});
And then for your script.js:
var images = [];
for(var i = 0; i < document.images.length; i++){
images.push(document.images[i].src);
}
chrome.runtime.sendMessage({method:"downloadImages",images:images});
This grabs the array of images and sends back the src of each image to your background page so you can do whatever you want with it.