We Keep Coding

JavaScript thumbnail image gallery

Please check my code. It is almost working but whenever i click one of the thumbnails it doesnt show image.
<script>
function thumbChange(num){
var thumb = "gata" + num + ".jpg";
document.getElementById("mainImg").src = thumb;
}
</script>
<div class="main">
<img id="mainImg" src="biokovo.jpg" />
</div>
<ul class="thumbs">
<li onclick="thumbChange(0)"><img src="biokovo.jpg"></li>
<li onclick="thumbChange(1)"><img src="grac.jpg"></li>
<li onclick="thumbChange(2)"><img src="lokvica.jpg"></li>
<li onclick="thumbChange(3)"><img src="hike.jpg"></li>
<li onclick="thumbChange(4)"><img src="gradac.jpg"></li>
</ul>

Here is a working example,
what i did, i passed the thumb as the img src.
and i pass the original size img url, as the argument of the function.
then inside the function im just passing the img url to the img tag.
<img id="mainImg" src="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1">
</div>
<ul class="thumbs">
<li onclick='thumbChange("https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
<li onclick='thumbChange("https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
<li onclick='thumbChange("https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li>
</ul>
<script>
function thumbChange(img){
document.getElementById("mainImg").src = img;
}
</script>
im sorry for the long img urls. you can replace them with shorter ones ofcourse.

Displaying selection text in span

So let's say I have this code:
<span id="select_list">
<ul>
<li><a id="1">1</a></li>
<li><a id="2">2</a></li>
<li><a id="3">3</a></li>
</ul>
</span>
<span id="selection"></span>
And let's also assume that there are a lot of list elements, ex. '4,5,6,7... etc'.
Can I get a html file, that is basically just text, that corresponds to the list element's ID (ex. 1.html, 2.html,... etc), to show in 'selection'?
If so how?
Thanks for your time. Hope I explained it well.

Something like this (jQuery) should work:
var list = $("#select_list");
var sel = $("#selection");
$("a", list).on("click", function(){
var id = $(this).attr("id");
sel.load(id+".html");
});

<div id="select_list">
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
</div>
<div id="selection"></div>
i would use a div not span spans are for if you want to change the size of something particular like this:
<li id="1" href="#"><a href="#"><span style="color: red;
font-size: 30px">1</span></a></li>
and from what i am understanding you want a selector to select them in css?
if so this is how:
#select_list ul li:nth_child(1) {
}
or
#select_list ul li#2 {
}
hope this helps you

I would suggest using data-attributes instead of IDs.
HTML
<ul class='selection-list'>
<li data-name='Dog'>Dog</li>
<li data-name='cat.html'>Cat</li>
<li data-name='45'>Fourty Five</li>
<li data-name='Triangle'>Three sides</li>
</ul>
<div class="output js-output"></div>
jQuery
var $output = $('.js-output');
$('.selection-list li').on('click', function() {
var selectionValue = $(this).data('name');
$output.text(selectionValue);
});
CSS
.selection-list li {
cursor: pointer;
}
jsFiddle
iframe
I'm starting to think that you are asking for an iframe with dynamic source. The question is unclear. You may want to try and rewrite it. - Here is what I think you may be after...
HTML
<ul class='selection-list'>
<li data-url='http://reputable.agency'>Reputable Agency</li>
<li data-url='http://perpetual.education'>Perpetual Education</li>
<li data-url='http://example.com/index.html'>Example.com</li>
</ul>
<iframe src='http://example.com' class="output js-output"></iframe>
JavaScript / jQuery
var $output = $('.js-output');
$('.selection-list li').on('click', function() {
// get the 'data-url' from the element...
var selectionValue = $(this).data('url');
// put that data-url into the src attribute of the iFrame
$output.attr('src', selectionValue);
});
Also..
Note that if you are using the same domain for all of these, you can build those urls differently to keep things simple.
<li data-url='index.html'>Example.com</li>
$output.attr('src', 'http://yoursite.com/' + selectionValue);
jsFiddle
AJAX
Now I'm wondering if you mean AJAX. Here is an example - but it's not tested because I don't have access to a bunch of relative URLs - but here is the basics - and should lead you to the right documentation.
HTML
<ul class='selection-list'>
<li data-url='index.html'>Reputable Agency</li>
<li data-url='index.html'>Perpetual Education</li>
<li data-url='index.html'>Example.com</li>
</ul>
<div class="output js-output"></div>
JavaScript / jQuery
var $output = $('.js-output');
var getOtherPage = function(target) {
$.ajax({
url: target,
success:function(response){
$output.html(response);
},error:function(){
alert("error");
}
});
};
$('.selection-list li').on('click', function() {
var selectionValue = $(this).data('url');
getOtherPage(selectionValue);
});

How to change content of div using jquery and variables?

Hello i've been trying to change the content of a div using jquery and i have the following problem, this is my code:
<div id="pages">
<div id='cssmenu'>
<ul id="themenu">
<li class='active'><a href='#'><span>Home</span></a></li>
<li class=''><a href='#'><span>Modules</span></a></li>
<li class=''><a href='#'><span>Degrees</span></a></li>
<li class=''><a href='#'><span>About us</span></a></li>
</ul>
In the js.js :
var Modules = "<p> 12346 </p>";
var Degrees = "<p> degrees </p>";
$(document).ready(function() {
$('ul#themenu li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
**$('#content').html(Modules);**
});
What I am trying to do is have the content changes accordingly with the variable that matches the ul's list items span name, if you can think of a better way to do this please let me know, thank you in advance, Chris.

If I understood you correctly, you are trying to use the name of the menu item to determine which content to use. I would save it in an object like this:
var text = {
Modules : "<p> 12346 </p>",
Degrees : "<p> degrees </p>"
};
and then for the click:
$('ul#themenu li').click(function() {
var section = $(this).find("span").text();
$('li.active').removeClass('active');
$(this).addClass('active');
$('#content').html(text[section]);
});
FYI, it would probably be cleaner not to use the .text() but rather to add an ID or class to the li and key off of that.

I believe you need to map your JS data to your HTML elements somehow. An easy way is to attach a class or an ID to your elements so you can access it directly, Right now it would include getting the text of your span tag then accessing your global data using that value
Using current model in your on click function
var key = $(this).find('span').text(); // Modules
window[key] // var Modules = "<p> 12346 </p>"
Using id and storing data in object:
<div id="pages">
<div id='cssmenu'>
<ul id="themenu">
<li class='active'><a href='#'><span>Home</span></a></li>
<li id="Modules" class=''><a href='#'><span>Modules</span></a></li>
<li class=''><a href='#'><span>Degrees</span></a></li>
<li class=''><a href='#'><span>About us</span></a></li>
</ul>
then you can easily access modules using the id $('#Modules')
If you need to make handling clicks completely generic you could create an object and have properties corresponding to the elements id
var DATA = {
'Modules': 'darfdsa';
}
HThen on click
DATA[$(this).attr('id')];

See output by clicking last tree links ,You can do something like this
var Modules = "<p style='color:red;'> 12346 </p>";
var Degrees = "<p style='color:green;'> degrees </p>";
var Aboutus = "<p style='color:yellow;'> About us</p>";
$(document).ready(function() {
$('ul#themenu li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
//alert($(this).find('span').text().replace(/\s+/g, ""));
$('#content').html(window[$(this).find('span').text().replace(/\s+/g, "")]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pages">
<div id='cssmenu'>
<ul id="themenu">
<li class='active'><a href='#'><span>Home</span></a></li>
<li class=''><a href='#'><span>Modules</span></a></li>
<li class=''><a href='#'><span>Degrees</span></a></li>
<li class=''><a href='#'><span>About us</span></a></li>
</ul>
<div id="content"></div>

Well just try:
$('#content').html(Modules);
Use the HTML DOM innerHTML Property to change elements content.
Or just using javascript and getElementById property:
document.getElementById("content").innerHTML=Modules;

Select an image source in a list with a style in jQuery

I have this code in HTML :
<div id="thumbs_list">
<ul id="thumbs_list_frame">
<li id="thumbnail_260" style="display: none;">...</li>
<li id="thumbnail_261" style="display: none;">...</li>
<li id="thumbnail_262" style="display: none;">...</li>
<li id="thumbnail_264" style="display: list-item;">
<a href='mywebsite.com'>
<img src="myphoto.png" alt="Photo"/>
</a>
</li>
<li id="thumbnail_266" style="display: none;">...</li>
</ul>
</div>
I'm looking to get the source of the image who is in <li> with style="display: list-item;" (myphoto.png) with jQuery but I don't know how to do...
I tried this :
var firstThumbnailDisplay = $('#thumbs_list_frame li').css('display') == 'list-item';
var img = firstThumbnailDisplay.find("img").first().attr('src');
But it doesn't work.

This should work:
var src = $("#thumbs_list_frame li").filter(":visible:first").find("img").attr("src");
It finds the first visible (style not set to display: none;) li and gets the src attribute of the image inside it.

Use the :visible selector.
var firstThumbnailDisplay = $('#thumbs_list_frame li:visible')

Use :visible to find the one that is displayed and after with .find() and .attr() to acheive your goal.
var src = $('.result').html($('#thumbs_list_frame li:visible').find('img').attr('src'));
Here's a fiddle

//declare an array (there could be multiple)
var listItems = [];
//Loop the items
$('#thumbs_list_frame li').each(function() {
var $this = $(this);
//check for value
if ($this.css('display') === 'list-item') {
//push item into array
listItems.push($this);
}
});
//listItems now contains all list items with display:list-item;
Fiddle

jQuery append() and data()

I have unknown number of divs with increasing ID's:
<div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>
And I have another list:
<ul>
<li id="target-1" class="target"> </li>
<li id="target-2" class="target"> </li>
<li id="target-3" class="target"> </li>
<li id="target-4" class="target"> </li>
</ul>
Now, what I want to achive is grabbing data-grab URL from source-1 and append it to target-1 as a image and so forth. So finally the output list will look just like:
<ul>
<li id="target-1"><img src="someURL" /> </li>
<li id="target-2"><img src="anotherURL" /> </li>
<li id="target-3"><img src="anddifferentURL" /> </li>
<li id="target-4"><img src="andthelastoneURL" /> </li>
</ul>
I'm grabbing all the data from the first list, but I'm not sure how to append right source element to right target element?
$(document).ready(function(){
$('.target').each(function(){
var URL = jQuery(this).data('grab');
});
});

$(document).ready(function(){
$('.target').each(function(){
var $this = $(this);
var divID = "source-" + ($this.id()).split("-")[1];
$("a", $this).append('<img src="' + $(divID).data("grab") + '" />');
});
});

You can use indices to select the right elements, if you add a class to your source elements (like .source):
$(document).ready(function(){
var targets = $( '.target' );
$('.source').each(function(index, value){
$(target[index]).children("a").first().append($("<img src=" + value.data('grab') + " />"));
});
});