Develop Reference

jquery emulate click on first li item

I have the following list of images:
<ul class="docs-pictures clearfix">
<li><img data-original="../assets/img/tibet-5.jpg" src="../assets/img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
<li><img data-original="../assets/img/tibet-6.jpg" src="../assets/img/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
<li><img data-original="../assets/img/tibet-7.jpg" src="../assets/img/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
<li><img data-original="../assets/img/tibet-8.jpg" src="../assets/img/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
<li><img data-original="../assets/img/tibet-9.jpg" src="../assets/img/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
</ul>
I want to simulate a click on the first image, so I did:
$('.docs-pictures li:first').trigger('click');
But it does not work.
I tried setting an id for the first img:
<li><img id="img1" data-original="../assets/img/tibet-5.jpg" src="../assets/img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
And then I did:
$("#img1").click()
And it worked, but I need to do it through <ul> the class

You are triggering click on li , while in example that worked you are triggering img
What you should do is
$(".does-pictures li:first img").click();
And that should work. Or move your trigger function to work on li.

I think you should be using
$('.docs-pictures li').first().trigger('click');
You can check the .first documentation at https://api.jquery.com/first/
Here is a fiddle I created to test it : https://jsfiddle.net/c96Lueso/

Your code is correct, but your click event maybe not, see the example:
$('li').on('click',function(){
alert("clicked");
})
$(document).ready(function(){
$('.docs-pictures li:first').trigger('click');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="docs-pictures clearfix">
<li><img data-original="../assets/img/tibet-5.jpg" src="../assets/img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
<li><img data-original="../assets/img/tibet-6.jpg" src="../assets/img/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
<li><img data-original="../assets/img/tibet-7.jpg" src="../assets/img/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
<li><img data-original="../assets/img/tibet-8.jpg" src="../assets/img/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
<li><img data-original="../assets/img/tibet-9.jpg" src="../assets/img/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
</ul>

Replace article with div with a button that will stay and can toggle between article and div content

I want with jQuery when I click the button to toggle the content between the article and the div.
jQuery so far, but its not working as intended.
Thats all i have, i will appreciate if you guys could guide me.
$('.gal').on('click',function(){
if($('article').css('display')!='none'){
$('#vnav').html($('#vnav').html()).show().siblings('div').hide();
}else if($('#vnav').css('display')!=='none'){
$('#vnav').show().siblings('div').hide();}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="gal">Gallery</button></div>
<article>some content inside</article>
<div id="vnav" style="display:none;">
<ul id="horizontal">
<li><img src="images/1.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/2.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/3.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/4.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/5.jpg" width="782" alt="" height="440" /></li>
</ul>
</div>
Thanks in advance!

You just need to write this code to toggle between article & div on button click.
$('.gal').on('click',function(){
$('article').toggle();
$('#vnav').toggle();
});

You can try this https://jsfiddle.net/2Lzo9vfc/170/
JS
var show = true;
$('.gal').click(function() {
if(show == true) {
$('article').hide(200);
$('#vnav').show(200);
show = false;
} else {
$('#vnav').hide(200);
$('article').show(200);
show = true;
}
});

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;
}

Popup doesn't show images

I have in my project a popup into my body tag and have a several data-role pages.
On each page have a button when the user click open this popup.
My problem is that I can open the popup window, but this popup contains a bxslider gallery for images and this images don't show.
Here is my code:
Paginas
Script:
$(document).on('pagebeforeshow', '#p36', function () {
$('#Paginasnocentro1234').hide();
});
$(document).on('click', '#blabla', function () {
$('#Paginasnocentro1234').toggle();
Popup:
<div data-role="popup" id="Paginasnocentro1234" data-theme="a" style="top:45px;position:absolute">
<div class="slider">
<ul class="bxslider" id="paginacao">
<li><img src="imagens/paginas/1.jpg" /></li>
<li><img src="imagens/paginas/2.jpg" /></li>
<li><img src="imagens/paginas/3.jpg" /></li>
<li><img src="imagens/paginas/4.jpg" /></li>
<li><img src="imagens/paginas/5.jpg" /></li>
<li><img src="imagens/paginas/6.jpg" /></li>
<li><img src="imagens/paginas/7.jpg" /></li>
<li><img src="imagens/paginas/8.jpg" /></li>
<li><img src="imagens/paginas/9.jpg" /></li>
</ul></div>
</div>

In Chrome, right click and inspect element in pop-up where the images "should" be. Find out what rule is being over-written. From there you'll see how to fix it.

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>