Develop Reference

How to resize images according to user input to prevent overflowing on web page

I have a table which could contain 1 to 12 images depending on user input. If there is one image then it'll show up in the table nicely. However, if there are 12 images, it'll stretch vertically downwards until I need to scroll down to view the rest of the images.
Is there a way to dynamically resize the images such that no scrolling is required?
What it looks like with
5 images:
12 images:
This is the current table I have and I use a JavaScript to fill in the images
<table id="first">
<tr>
<td>
<ul>
<li><img id="firstL1"></li>
<li><img id="firstL2"></li>
<li><img id="firstL3"></li>
<li><img id="firstL4"></li>
<li><img id="firstL5"></li>
<li><img id="firstL6"></li>
<li><img id="firstL7"></li>
<li><img id="firstL8"></li>
<li><img id="firstL9"></li>
<li><img id="firstL10"></li>
<li><img id="firstL11"></li>
<li><img id="firstL12"></li>
</ul>
</td>
<td><ul></ul></td>
<td>
<ul>
<li><img id="firstR1"></li>
<li><img id="firstR2"></li>
<li><img id="firstR3"></li>
<li><img id="firstR4"></li>
<li><img id="firstR5"></li>
<li><img id="firstR6"></li>
<li><img id="firstR7"></li>
<li><img id="firstR8"></li>
<li><img id="firstR9"></li>
<li><img id="firstR10"></li>
<li><img id="firstR11"></li>
<li><img id="firstR12"></li>
</ul>
</td>
</tr>
</table>

Let's assume your table takes height 100% of the screen
var totalHeight = window.innerHeight,
imgLen = $('table img').length;
then
$('table img').height(totalHeight / imgLen + 'px');

jquery show hide div on hover and retain visibility until mouseout

I have select language drop down menu.
When the Flag is hovered it should display the language options and remain showed. When the mouse leaves the language options or when the flag is hovered again the language options should be hidden. I tried but it is showing and hiding instantly.
Html:
<img src="images/english.jpg" alt="en" id="langflag">
<div class="select-lang" style="display:none;">
<h2>In Your Language</h2>
<ul>
<li><img src="images/in_14.png" alt="in"> हिन्दी </li>
<li><img src="images/es_14.png" alt="es"> Español</li>
<li><img src="images/fr_14.png" alt="fr"> Français</li>
<li><img src="images/de_14.png" alt="de"> Deutsch</li>
<li><img src="images/ro_14.png" alt="ro"> Română</li>
<li><img src="images/br_14.png" alt="br"> Brasil</li>
<li><img src="images/tr_14.png" alt="tr"> Türkçe</li>
<li><img src="images/pl_14.png" alt="pl"> Polski</li>
<li><img src="images/pt_14.png" alt="pt"> Português</li>
<li><img src="images/ru_14.png" alt="ru"> Русский</li>
<li><img src="images/jp_14.png" alt="jp"> 日本語</li>
<li><img src="images/it_14.png" alt="it"> Italiano</li>
<li><img src="images/hu_14.png" alt="hu"> Magyar</li>
<li><img src="images/se_14.png" alt="se"> Svenska</li>
<li><img src="images/kr_14.png" alt="kr"> 한국어</li>
<li><img src="images/cn_14.png" alt="cn"> 中文</li>
</ul>
<p>More Languages ›</p>
</div>
jQuery
$(document).ready(function() {
$( "#langflag" ).hover(function() {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
});
});
Fiddle here.

$( "#langflag" ).on('mouseenter', function() {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
});
//keep it open if mouse is within #langflag, hide if mouse leaves both
$( ".select-lang, #langflag" ).on('mouseleave', function() {
if ($(this).attr('id') != 'langflag') {
$( ".select-lang" ).slideToggle( 400, function() {
// Animation complete.
});
}
});

Image Gallery carousel from right to left direction not working when changing css properties

I am working on an image gallery and it works fine for the English version but i need to replicate same for the other version of the website and need to make it work in RTL direction. When i css 'direction:rtl' it breaks the thumbnail script and next | prev navigation doesn't work anymore.
I tried to change many a thing but none seems to work i even made some minor changes to the gallery.js but that didn't even fix the issue.
I am not sure how to create a make everything work for thumbnail carousel when direction:rtl.
I need this for Arbic version of website and Arabic is RTL not like English which is LTR.
Fiddle Link http://jsfiddle.net/f4XDj/
Updated Link http://jsfiddle.net/f4XDj/1/
Actual gallery sample link http://tympanus.net/Tutorials/ResponsiveImageGallery/
Partial HTML Code
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
<li><img src="images/thumbs/3.jpg" data-large="images/3.jpg" alt="image03" data-description="A plaintful story from a sistering vale" /></li>
<li><img src="images/thumbs/4.jpg" data-large="images/4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></li>
<li><img src="images/thumbs/5.jpg" data-large="images/5.jpg" alt="image05" data-description="And down I laid to list the sad-tuned tale" /></li>
<li><img src="images/thumbs/6.jpg" data-large="images/6.jpg" alt="image06" data-description="Ere long espied a fickle maid full pale" /></li>
<li><img src="images/thumbs/7.jpg" data-large="images/7.jpg" alt="image07" data-description="Tearing of papers, breaking rings a-twain" /></li>
<li><img src="images/thumbs/8.jpg" data-large="images/8.jpg" alt="image08" data-description="Storming her world with sorrow's wind and rain" /></li>
<li><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="image09" data-description="Upon her head a platted hive of straw" /></li>
<li><img src="images/thumbs/10.jpg" data-large="images/10.jpg" alt="image10" data-description="Which fortified her visage from the sun" /></li>
<li><img src="images/thumbs/11.jpg" data-large="images/11.jpg" alt="image11" data-description="Whereon the thought might think sometime it saw" /></li>
<li><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="image12" data-description="The carcass of beauty spent and done" /></li>
<li><img src="images/thumbs/13.jpg" data-large="images/13.jpg" alt="image13" data-description="Time had not scythed all that youth begun" /></li>
<li><img src="images/thumbs/14.jpg" data-large="images/14.jpg" alt="image14" data-description="Nor youth all quit; but, spite of heaven's fell rage" /></li>
<li><img src="images/thumbs/15.jpg" data-large="images/15.jpg" alt="image15" data-description="Some beauty peep'd through lattice of sear'd age" /></li>
<li><img src="images/thumbs/16.jpg" data-large="images/16.jpg" alt="image16" data-description="Oft did she heave her napkin to her eyne" /></li>
<li><img src="images/thumbs/17.jpg" data-large="images/17.jpg" alt="image17" data-description="Which on it had conceited characters" /></li>
<li><img src="images/thumbs/18.jpg" data-large="images/18.jpg" alt="image18" data-description="Laundering the silken figures in the brine" /></li>
<li><img src="images/thumbs/19.jpg" data-large="images/19.jpg" alt="image19" data-description="That season'd woe had pelleted in tears" /></li>
<li><img src="images/thumbs/20.jpg" data-large="images/20.jpg" alt="image20" data-description="And often reading what contents it bears" /></li>
<li><img src="images/thumbs/21.jpg" data-large="images/21.jpg" alt="image21" data-description="As often shrieking undistinguish'd woe" /></li>
<li><img src="images/thumbs/22.jpg" data-large="images/22.jpg" alt="image22" data-description="In clamours of all size, both high and low" /></li>
<li><img src="images/thumbs/23.jpg" data-large="images/23.jpg" alt="image23" data-description="Sometimes her levell'd eyes their carriage ride" /></li>
<li><img src="images/thumbs/24.jpg" data-large="images/24.jpg" alt="image24" data-description="As they did battery to the spheres intend" /></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->

I write new rule for a your example from tympanus and for me working:
.rg-caption p {
direction: rtl;
}
and I delete this rule:
.rg-caption{
text-align: center;
}
so if you would change a direction in carousel you must change this part:
$navPrev.bind('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.bind('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).bind('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}

Jquery Image Change -- iterating through images

If I have a set of classes that I want to integrate through, like this:
.g1 ---> .g12
How would I do that?
I have the increment thing I want to do and I believe I've written it properly, but I don't know how to concatenate that variable with the .grain so I can change only one square per click.
$("#grains").click(function(){
var x;
x++;
$(".grain").attr('src',"orangesq-01.png");
});
Here's the list item I made:
<ul id="grains">
<li><img src="blusq-01.png" class="grain" /></li>
<li><img src="blusq-01.png" class="grain1" /></li>
<li><img src="blusq-01.png" class="grain2" /></li>
<li><img src="blusq-01.png" class="grain3" /></li>
<li><img src="blusq-01.png" class="grain4" /></li>
<li><img src="blusq-01.png" class="grain5" /></li>
<li><img src="blusq-01.png" class="grain6" /></li>
<li><img src="blusq-01.png" class="grain7" /></li>
<li><img src="blusq-01.png" class="grain8" /></li>
<li><img src="blusq-01.png" class="grain9" /></li>
<li><img src="blusq-01.png" class="grain10" /></li>
<li><img src="blusq-01.png" class="grain11" /></li>
</ul>
I think you get the idea of what I'm trying to do. If I could figure out that concatenating thing, it would be awesome.

You can just append the index or just use the .eq() call if they are in order already.
var x = 0;
$("#grains").click(function(){
$(".grain" + (x === 0 ? '' : x)).attr('src',"orangesq-01.png");
//or
$(this).find('img').eq(x).attr('src',"orangesq-01.png");
x++;
});
Heh http://jsfiddle.net/mURxA/

An alternative, more dynamic approach, would be use a custom selector in conjunction with eq(0) to simply select the first image, like so:
$('#grains').click(function()
{
$('img[src="blusq-01.png"]', this).eq(0).attr('src', 'orangesq-01.png');
});
Hope you don't mind Andrew, I updated your example.

Javascript image gallery preventing the default

Hi i have a question regarding the image gallery i am trying to create. I have created a thumbnail viewer so when clicked the javascript then displays the thumbnail as a larger image on the same page, but i am required to add a way to still see the larger images when javascript is turned off. Here is my code
(javascript)
function changeImage(el)
{
evt.preventDefault(evt);
var elem = document.getElementById("slide");
elem.src = "Assets/images/big/"+el+".jpg";
}
(HTML)
<div id="gallery">
<img id="slide" src="Assets/images/big/0.jpg" onClick="next();">
</div>
<div id="thumb">
<ul class="thumbnail">
<li><img id="thumb" src="Assets/images/thumbs/0.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/1.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/2.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/3.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/4.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/5.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/6.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/7.jpg" /></li>
</ul>
</div><!-- thumb-->
Now i had it so the thumbnail viewer was working but after adding the javascript fail option it no longer displays the image in the gallery but instead on a separate page as it would if there was no javascript, what would be the easiest way to fix this so when the javascript is working the thumbnail image is shown in the gallery when it is not it goes into a seperate page? Any help is much appreciated

The evt variable is not declared anywhere. You would need to pass the event object into the function. Alternatively, you could put return false at the end of your onclick attributes.

Remove
evt.preventDefault(evt);
and change
<img id="thumb" src="Assets/images/thumbs/i.jpg" />
(i from 0 to 7) in your HTML codes to
<img class="thumb" src="Assets/images/thumbs/i.jpg" onclick="changeImage('i');" style="cursor:pointer;"/>
(<a> is removed, and style attribute is added to change the mouse cursor to pointer, and changed id to class - multiple elements having same ID is bad.)

Return false from the event handler:
function changeImage(el) {
var elem = document.getElementById("slide");
elem.src = "Assets/images/big/" + el + ".jpg";
return false;
}
And in html add return statement too:
<ul class="thumbnail">
<li><img id="thumb" src="Assets/images/thumbs/0.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/1.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/2.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/3.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/4.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/5.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/6.jpg" /></li>
<li><img id="thumb" src="Assets/images/thumbs/7.jpg" /></li>
</ul>