eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-14 04:10:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add grid of thumbnails (#539)

Browse Source 
* Added four preview images

* Added preview images to buttons

* Maked the crop preview resposive

* icon overlays

* made previews square

* finalized css for square images

* Added four preview images

* Added preview images to buttons

* Maked the crop preview resposive

* icon overlays

* made previews square

* finalized css for square images
This commit is contained in:
Jonathan Xu
2018-12-09 22:35:32 -05:00
committed by Jeffrey Warren
parent ceca433806
commit 95f8dad901
8 changed files with 4048 additions and 3963 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
examples/demo.js
View File

@@ -1,4 +1,35 @@
window.onload = function() {
function generatePreview(previewStepName, customValues, path) {
var previewSequencer = ImageSequencer();
function insertPreview(src) {
var img = document.createElement('img');
img.classList.add('img-thumbnail')
img.classList.add('no-border');
img.src = src;
$(img).css("max-width", "200%");
$(img).css("transform", "translateX(-20%)");
var stepDiv = $('#addStep .row').find('div').each(function() {
if($(this).find('div').attr('data-value') === previewStepName) {
$(this).find('div').append(img);
}
});
}
function loadPreview() {
previewSequencer = previewSequencer.addSteps('resize', {resize:"40%"});
if(previewStepName === "crop") {
console.log(customValues);
previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
}
else {
previewSequencer.addSteps(previewStepName, {[previewStepName]: customValues}).run(insertPreview);
}
}
previewSequencer.loadImage(path, loadPreview);
}
sequencer = ImageSequencer();
function refreshOptions() {
@@ -144,6 +175,7 @@ window.onload = function() {
step.output.src = reader.result;
sequencer.run({ index: 0 });
step.options.step.imgElement.src = reader.result;
updatePreviews(reader.result);
}
});
@@ -182,4 +214,32 @@ window.onload = function() {
}
location.reload();
});
function updatePreviews(src) {
$('#addStep img').remove();
var previewSequencerSteps = {
"brightness": "20",
"saturation": "5",
"rotate": 90,
"contrast": 90,
"crop": {
"x": 0,
"y": 0,
"w": "(50%)",
"h": "(50%)",
"noUI": true
}
}
Object.keys(previewSequencerSteps).forEach(function(step, index) {
generatePreview(step, Object.values(previewSequencerSteps)[index], src);
});
}
if (getUrlHashParameter('src')) {
updatePreviews(getUrlHashParameter('src'));
} else {
updatePreviews("images/tulips.png");
}
};