Develop Reference

Script Revision for event.target

I'm kind of a newbie to js, could someone have a look at this code and tell me if it is correct and if it could be improved and how? it is working as intended, but honestly I don`t know if it is well written. Thanks in advance (:
<script>
$(document).ready(function() {
$("button").click(function(event) {
var a = (event.target).classList.item(0);
var b = ".carousel" + "." + a ;
$(b).myfunction;
});
});
</script>
The reason for that script is that I have a Carousel (Bootsrap) inside a Slider ("JQuery lightSlider") inside a custom popup modal and I don`t want the imgs carousel to load at page start only when the carousel would be visible.
What the script does is to "store" the class name of the button element ("custom-n") clicked, then write .carousel.custom-x to be stored in the variable b, and then use the var b as a selector to call the function for that custom-n carousel that replaces data-src with src.
I hope this isn't confusing haha
This is a simplification of the html, the modal opens whenever a <button> is clicked.
The are kind of a "thumbnail" for the main slider (light-slider), so:
<button class="custom-1"> opens the modal and set the "light-slider" to slide n1
<button class="custom-2"> opens the modal and set the "light-slider" to slide n2
and so on.
The carousels inside the lightslider's slides they all have img with data-src and the Idea is to replace the data-src with src of the carousel that should be "related" to the custom
<div class="light-slider-buttons">
<button class="custom-1 myclass"></button>
<button class="custom-2 myclass"></button>
<button class="custom-3 myclass"></button>
</div>
<div class="modal-wrp">
<div class="modal-inner">
<ul id="light-slider">
<li>
<div class="slide-wrapper">
<div class="carousel custom-1">
<div class="carousel-inner">
<div class="carousel-item active">
<img data-src="...">
</div>
<div class="carousel-item">
<img data-src="...">
</div>
<div class="carousel-item">
<img data-src="...">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>

The code looks good.
I have two suggestions.
Firstly, you seem to be using class attribute to store data (custom-1, etc)
Why not set it to data-item-class attribute instead (any name starting with data- will do)?
<div class="light-slider-buttons">
<button class="myclass" data-item-class="custom-1"></button>
<button class="myclass" data-item-class="custom-2"></button>
<button class="myclass" data-item-class="custom-3"></button>
</div>
The value can be read as event.target.dataset.itemClass (item-class becomes itemClass, see docs for more info).
The code for variable a will be replaced with:
var a = event.target.dataset.itemClass;
Secondly, setting click event handler for 'button' selector is too wide.
It will cause errors when new button element with another purpose gets added to your page in the future.
It is much safer to think of <div class="light-slider-buttons"> as a component wrapping your button elements and apply the click handler only to those.
$(".light-slider-buttons button").click(function(event) {
...
}
It does not change much but is important because if you add other buttons outside <div class="light-slider-buttons"> they will not get click event handler.
jQuery uses CSS selectors syntax, you can find more in docs.
Here's the recommended code for script tag
<script>
$(document).ready(function() {
$(".light-slider-buttons button").click(function(event) {
var a = event.target.dataset.itemClass;
var b = ".carousel" + "." + a ;
$(b).myfunction;
});
});
</script>
P.S. jQuery programming style is quite imperative (specifying how page should update on every event).
There are other ways to build UI, for example in React programming is declarative (specifying how UI should look like based on given input/state)

retrieve contents of div and make image src

Is there a way to fetch the content of a div and place that ocntent in the 'src' parameter of an image? I'm working on a project that uses json to load translation files, and tehrefore I can't load an image directly, but figured I could at least load the image name.
So:
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img src="DIV CONTENTS HERE">
Ideas appreciated! (Am also using jquery so open to that as well)

The button demonstrates that ablility. Use the button's onclick code wherever you need.
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="myImage" />
<button onclick="document.getElementById('myImage').src=document.getElementById('flag-name').innerText">Change</button>

You can simply do it in jQuery by getting the text of the div and then setting the source of image like this:
var source = $("#flag-name").text();
console.log("before - " + $("#image").attr("src"));
$("#image").attr("src",source);
console.log("after - " + $("#image").attr("src"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">en-flag.jpg</div>
<img id="image" src="DIV CONTENTS HERE">

You need an event to start the jQuery/javascript -- so I added a button. Also, you will find it easier to target specific DIV and IMG tags if you give them IDs or classes.
$('button').click(function(){
var mySrc = $('#flag-name').text();
$('img').attr('src', mySrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flag-name" style="hidden">http://placeimg.com/300/200/animals</div>
<img src="DIV CONTENTS HERE">
<button>Go</button>

How to get the src of the image within a dynamic DIV with $(this)

I'm trying to get the src of the image, but the div is dynamic, then appears several times on the page, when I click on the DIV, he always gets the first frame and not the DIV clicked, how can I use $(this) correctly? Follows the code I'm using:
<section class="clientes" role="region">
<a href="" title="Cliente" class="group">
<img src="img/image01.jpg" alt="" />
<h2>The title</h2>
<p>content here</p>
</a>
</section>
<script>
$("body").on("click", ".clientes", function(){
var pega = $(".clientes .dsp-none img").attr('src');
$(this).find("a").attr("href", pega);
})

Take advantage of the fact that jQuery arranges for this to refer to the clicked DOM element:
var pega = $(this).find(".dsp-none img").attr('src');
You may or may not want to use .prop("src") instead of .attr().

on jquery, how to manually define image src into html <img> tag

i'm trying to create a page filled with thumbnails, and on click, another div Full(to show the thumbnail image in full screen) will pop out, i will retrieve the src of the thumbnail img and pass into the Full div to display the clicked image.
This is what i have so far, fiddle: http://jsfiddle.net/mwhLoyy8/1/
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/BjVeUYS.png" alt="logo">
</div>
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" alt="logo">
</div>
for now i am detecting test_img click, and retrieving from js with
img = $('<img />', {src : this.src,
'class': 'full_image_pic'
});
this.src works fine, but i want to change to detecting on img_section instead of test_img, but i don't know how to retrieve the src, i tried this.test_img.src but it doesn't work.
Reason why i want to detect the div instead of the img directly is because in my real working file i have overlay another and while mouseover on the thumbnails, which the detection will not work on the words, since i only make it image-detectable only, so i want to change to detecting the parent div instead.
Another thing is, once i display the full image, how do i display unique Title & description under the full image displayed? Please guide me! Thanks
for Kamal
<div class="popUp">
<div class="fullPic">
<img class="full_image_pic" src="images/pic1.jpg" alt="logo2">
<div class="full_image_desc">
<h3 class="desc">Title</h3>
<p class="desc">My desc</p>
</div>
</div>

You can get the src with jQuery attr
img = $(".test_img").attr('src');
and change the src by
$(".full_image_pic").attr('src', img);
Please also take a look at this exmaple.
For changing title and description dynamically, you can add attributes in your original image;
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" img-title="some title" img-desc="some description" alt="logo">
</div>
Than use the attr to change the info.
title = $(".test_img").attr('img-title');
and using .html change the content of title/description
$(".full_image_pic .desc").html(title);

You can use class or ID to select an image and change image src
$(".image class or #ID").attr("src", "file name");
$(".photo").attr("src", "photo.jpg");
$("#logo").attr("src", "new-logo.jpg");

Use
$(".test_img").attr("src","abc.jpg");

jquery onclick source image from php array

I'm very new to PHP and jquery, and am trying to set up an image gallery with thumbnails that when clicked, display a larger image in the div above them.
So far, I have this:
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
$("#large").attr('src',"http://something.com/image.jpg");
});
});
What I want to do is change the image source to be from an array of images. When someone clicks thumbnail A, for instance, I want it to load the corresponding large image A into the div above the thumbnails. I have two arrays, one for the thumbnails and one for the larger images. Seems like a pretty basic thing to do, but like I said, I am totally new at this!
Thanks!

Your javascript code looks correct. Can I see your html code.
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="container">
<img id="large" src="" />
</div>
<div id="thumbnail-container">
<img class="thumbnail" src="large.PNG" width="50" height="50" alt="test1"/>
<img class="thumbnail" src="large2.PNG" width="50" height="50" alt="test2"/>
</div>
<script>
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
$("#large").attr('src',$(this).attr('[REPLACE_WITH_YOUR_LARGE]'));
});
});
</script>
</body>
</html>
And I simply use your js code on the sample above.

You need to pass the array to your javascript first, store in a javascript array, and with proper index (javascript only accept number index), and load it with click event.
there is two way(from my knowledge) to do this.
1) At ur index page, after you load your JS file, you echo <script>loading_function("array_in_string")</script>;, and process the string in JS and store into array.
2) using Ajax, call to server and request for the full list.

In the HTML of the thumbnail images, add a data-tag such as
<img src="image.jpg" data-full-imgpath="http://..." class="thumbnail" />
<img src="image2.jpg" data-full-imgpath="http://..." class="thumbnail" />
Then change your JS to this:
$(function() {
$('.thumbnail').click(function(e){
e.preventDefault();
var imgPath = $(this).data("full-imgpath");
$("#large").attr('src',imgPath);
});
});