We Keep Coding

How can I integrate srcset in slideshow?

My website contains a slideshow. I want to change the image, depending on the viewport size. This has been solved with following code:
<picture>
<source media="(min-width:650px)" srcset="images/slider/4.gif" >
<source media="(min-width:200px)" srcset="images/slider/4_m.gif" >
<img src="images/slider/4.gif" alt="" style="width:auto;" >
</picture>
The image works, dependently on the viewport size. My problem - I want to integrate in this code here:
<div class="slider-area">
<div class="bend niceties preview-2">
<div id="ensign-nivoslider" class="slides">
'Following line should be replaced with code above...
<img src="images/slider/4.jpg" alt="" title="#slider-direction-1" />
<img src="images/slider/5.jpg" alt="" title="#slider-direction-2" />
<img src="images/slider/6.jpg" alt="" title="#slider-direction-3" />
</div>
4th line should be replace by code above, but it doesn't work out. Can someone help?
Thanks in advance!!

How to create anchors or append items in aspx pages?

I have some code I have written for a image gallery on my page, "gallery.aspx". The scenario is that I have an external aspx page with different links. When I click on one of those link I want to redirect to this image gallery but to a specific image.
For e.g I have a page called "home.aspx" with a link called "img2". When I click on "img2" I want to open up this image gallery(which sits on a page called "gallery.aspx"), but I want tab 2 of the gallery to be opened so 2nd image.
I can get it to work on my html pages using (url/gallery.html?img=img2) but I would really like to be able to do it on my sharepoint aspx page.
Thank you in advance.
My HTML code is as follows:
<div class="gallery" align="center">
<div class="thumbnails">
<img name="ift" onclick="preview.src=img6.src" id="img6" src="IFT.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img1.src" id="img1" src="Clear.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img2.src" id="img2" src="Agile.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img3.src" id="img3" src="AllForOne.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img4.src" id="img4" src="Decide.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img5.src" id="img5" src="Possibilities.png" alt="Image Not Loaded"/>
</div>
<br/>
<div class="preview" align="center">
<img id="preview" src="IFT.png" alt="No Image Loaded"/>
</div>

Aspx also support HTML. You could just put these code to your ASPX page. No changes would be required.

Why does Khan Academy use templates with just empty space?

In Khan Academy's Perseus repo they use {' '} instead of raw .
What is this purpose of this?

In JSX, unlike HTML, newlines do not count as whitespace. For example, in HTML, to show some images next to each other without whitespace between them while putting them on separate lines in HTML, you'd have to do something like
<p><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--></p>
In React, the same layout could be accomplished with
<p>
<img src="." alt="" />
<img src="." alt="" />
<img src="." alt="" />
<img src="." alt="" />
</p>
That means that if you do want spaces between them, you have to declare them yourself; if you want a non-breaking space, you can use &nbsp, but if you want a regular, breaking space, you can specify it in JavaScript using {' '}:
<p>
<img src="." alt="" />{' '}
<img src="." alt="" />{' '}
<img src="." alt="" />{' '}
<img src="." alt="" />
</p>
Because newlines don't count as whitespace, you could also write that as
<p>
<img src="." alt="" />
{' '}
<img src="." alt="" />
{' '}
<img src="." alt="" />
{' '}
<img src="." alt="" />
</p>
Of course, you could also use CSS to apply spacing to the images, but it's currently much harder to remove spacing via just CSS.

how to prevent image wrap in responsive mode

how to prevent image wrap in responsive mode. A simple code like below is break to new line in responsive mode.
<img src="image1.jpg" style="float:left;" />
<img src="image2.jpg" style="float:left;" />
<img src="image3.jpg" style="float:left;" />
<img src="image4.jpg" style="float:left;" />
<img src="image5.jpg" style="float:left;" />
please help
Edit:
see this jsbin: http://jsbin.com/AhIwiCA/1/edit

If you want to prevent the images from wrapping, then add a white-space: nowrap; to the parent element and remove the style="float:left; from the images.
http://jsfiddle.net/myajouri/gqxxC/

Bootstrap has a class called inline I believe which may bring the images in line with each other, failing that you may need to trawl through the css to find the relevant css class to prevent this behaviour.

Image swap onclick within div

I would like to replace images on click but also have the replaced image click to a lightbox. Here is my example where the first image has the lightbox: http://www.artdesigngroup.co/products/test.html
My thought is that I need to apply the "display" ID on the surrounding div and replace the images within this div. But how do I do this and create the lightbox?
Thank You.

I would rethink your structure for handling this. Most of what you are doing can be handled with straight jQuery instead of rolling your own swap functions. When you ask your questions, including a Fiddle is a great way to get an answer faster. Note that I am using jQuery 1.7's prop method here which you should be using instead of attr.
http://jsfiddle.net/txbqX/3/
jQuery to get what you want
//when main image is clicked, show it in colorbox
$('#foo a').colorbox();
//when thumb is clicked, set main image to it
$('div#thumbs img').click( function() {
$('#foo a').prop('href', $(this).prop('src'));
$('#foo img').prop('src', $(this).prop('src'));
return false; //stop link from navigating
})
Simplified HTML
<div id="foo" >
<a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display" />
</a>
</div>
<br />
<div id="thumbs">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" />
</div>