We Keep Coding

Cloudinary with Django - use javascript to dynamically increase/decrease photo width and height after page rendered

I have Django app where I used Cloudinary to deliver images.
The images are displayed in template with fixed width and height as follows:
<a href="/photo/{{ photo.id }}/">
{% cloudinary photo.filename width=100 height=100 crop="fill" %}
</a>
I want to add a "+" and "-" buttons to dynamically increase and decrease photo width and height after the page is rendered.
I would have an array of possible width/height values eg 100, 125, 150, 175, 200, 225, 250, 300 or simply add 25 to 'base' width of 100 and subtract 25 to decrease width back to 100 (or use 'reset' button to reset value to 100). These would be selected by successively clicking the "+" and "-" buttons.
Ideally page doesn't reload, only Cloudinary call is made using ajax to retrieve resized photos. I am using Isotope.js to display photos in a grid which would be called to re-adjust photo layout on page.
This is not just dynamically changing width/height values of rendered photos but getting new sized photos from cloudinary.
The following script will get and render photo from Cloudinary and could replace width and height with variables:
$.cloudinary.image(data.result.public_id,{
format: data.result.format,
width: 100,
height: 100,
crop: "fill"})
I imagine looping through the rendered photo elements to replace existing photos with new photos using script above.
But struggling to come up with approach.

If you want to get the new URL you can set the width/height:
myWidth = 300
myHight = 300
cloudinary.CloudinaryImage("sample").build_url(
width = myWidth, height = myHight, crop = 'fill')
The result will be:
http://res.cloudinary.com/demo/image/upload/c_fill,h_300,w_300/sample

Disable function in a slideshow plugin that centres the image everytime the browser is refreshed?

I am using a slideshow plugin that centres the images in the browser. I have removed part of the js script to to disable the function so that the images in the slideshow stay fixed and do not move as the browser size changes.
// Adjust image when browser is resized
$(window).resize(function(){
base.resizeNow();
});
However, the problem remains that when the browser is refreshed the image is centred again. I need it to remain at a fixed distance from the left of the browser at all times. How do I disable the part of the plugin script that centres the image every time the browser is refreshed?
Please view this page that I am working on to see my problem: http://georgewoolfe.com/new-website/yogurt-line.html

From the documentation of supersized.js
horizontal_center
Centers image horizontally. When turned off, the images resize/display from the left of the page.
So, consider setting horizontal_center to 0 in your script, i.e. the following region in yogurt-line.html:
$.supersized({
autoplay : 0,
transition : 0,
keyboard_nav : 1,
performance : 1,
vertical_center : 1,
horizontal_center : 1, // <- Set this to 0
fit_always : 1,
...
Then, you could adjust the distance from the left using CSS rules such as left, if needed.

If you set horizontal center to 0 (false) as recommended by #Yasa Akbulut,
you would want to adjust your css, first setting the position of the slideshow to not be absolute:
ul#supersized li {position:initial}
Then you can adjust the position in the page where you want the slideshow.
I made a JSFiddle to demonstrate:
http://jsfiddle.net/y3rqq561/2/

Adding hyperlinks to a javascript image array

I'm having a problem with a java carousel. The code is working fine on my page, but I want to add hyperlinks to the images, but I'm unsure how to achieve this. I've tried a few things, but its just caused the code to stop working, and the carousel to drop off the page.
As I say, its all working fine, but as soon as I alter the default code, it falters.
The code I have so far is:
<script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['autumnpark.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description"]
['chime.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.'],
['girlportrait.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['redbench.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
Any help is appreciated....

Check out the source here:
http://home.comcast.net/~jscheuer1/side/bgcarousel/demo_linked.htm
Great example. Just add a link into the slide text, and use CSS to style it to the width and height 100% of the slide box.

Trying to fix slideshow (Horizontal + Vertical)

Script here: http://jsfiddle.net/dt5Se/ , or below:
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [720, 478], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/indeximages/1.jpg"],
["images/indeximages/2.jpg"],
["images/indeximages/3.jpg"],
["images/indeximages/4.jpg"],
["images/indeximages/5.jpg"],
["images/indeximages/6.jpg"],
["images/indeximages/7.jpg"],
["images/indeximages/8.jpg"],
["images/indeximages/9.jpg"],
["images/indeximages/10.jpg"],
["images/indeximages/11.jpg"] // no comma for last image
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""})
Is there a way I can make this work for both vertical and horizontal images? It's killing me...
See implementation here: http://www.phillipehan.com/
As you can see the 3rd image is surrounded in black on either side. How can I fix this?
Thanks!

Change the Position of an Image in JavaScript

I hope that's the correct description of this problem. If not, please forgive me, I'm new here and new to JavaScript..
I am creating a turntable animation of a chair using a jQuery plugin called Spritespin. I have it setup so it loads a long strip of sprites of the chair rotating around its axis.
The Spritespin website shows what parameters of an object notation I can change to get the thing to work. This is what it looks like:
// initialize the spritespin
$(".spritespin").spritespin({
width : 640,
height : 640,
frames : 24,
resolutionX : 15360,
resolutionY : 640,
image : "turntable/images/LC-01_strip_black.jpg",
(some more code..)
});
As you can see, all I have to do is create a strip of (in my case) 24 images of 640 x 640 and link to it.
The problem is that I would like to add some functionality. I'd like to have a set of colour swatches to the side of the rotating chair that alow the user to pick a different colour.
My idea is to put all 7 sprite strips into one huge image (15360 x 4480) and shift its y position based on which swatch is clicked. But I have no idea how to write that code or if it's even the smartest way to go about it.
This is how my swatches are setup right now:
<div id="colourSwatches">
<div id="swatchBlack"></div>
<div id="swatchBlue"></div>
<div id="swatchBrown"></div>
<div id="swatchPink"></div>
<div id="swatchRed"></div>
<div id="swatchTurquoise"></div>
<div id="swatchYellow"></div>
</div>
I hope that wasn't too convoluted and that someone can help me.

I looked over the spritespin.js file and didn't see any function to change either offsetX/Y or the image it was using. However it seems you can call the spritespin function on the div again with changes eg:
$('a').click(function() {
var swatch = $(this).attr('id');
if(swatch == "black") {
$(".spritespin").spritespin({
width : 640,
height : 640,
frames : 24,
resolutionX : 15360,
resolutionY : 640,
image : "turntable/images/LC-01_strip_black.jpg",
(some more code..)
});
}
});
There are obviously different ways you can proceed to change the image : option like setting it to a variable which goes through the if statements (cutting down on the size of the file), using the variable in something like
image : "turntable/images/LC-01_strip_" + swatch + ".jpg"
or reading the filenames using AJAX or JSON. I unfortunately do not know how this affects the DOM or if clicking the link 1 million times will break the browser.