I'm making a slider for my webpage and I'm using jquery's plugin called "Cycle". I have faced a problem with accessing source of images used in slider. It's quite hard to explain so here is my code from 'head' part:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').before('<ul id="pager">').cycle({
fx: 'scrollHorz',
speed: 900,
timeout: 5500,
pause: 1,
pager: '#pager',
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="120" height="65" /></li>';
}
});
</script>
Here is the html part:
<div id="slider_container">
<div id="slider">
<div class="items">
<img src="1.jpg"/>
<div class="info">
<h2>Tile Nr. 1</h2>
</div>
</div>
<div class="items">
<img src="2.jpg"/>
<div class="info">
<h2>Tilte Nr. 2</h2>
</div>
</div>
</div>
<div id="pager">
</div>
</div>
In my slider div I want to display blocks, each of them containing image and some title but in pager div I want to display only the images from those blocks used in slider. I'm sure that the problem is in slide.src expression in the third javascript. How should I change that expression to get the source of an image stored in appropriate items block?
Could you set up a jsFiddle that sources the jquery files you need here?
My guess is that slide.src isn't what you want. If slide is a reference to an element in the DOM, then you access its 'source' attribute like this: $(slide).attr('src')
Updated:
Turns out 'slide' is the containing div so we need this instead:
$(slide).find('img').attr('src')
When you inspect the argument slide inside pagerAnchorBuilder-function you find slide being a div-element with class items and containing the img-element as first child-element. So you can access the img and it's src-attribute like so:
pagerAnchorBuilder: function(idx, slide) {
var source = $('img', slide).attr('src');
return '<li><img src="' + source + '" width="120" height="65" /></li>';
}
There are also some other ways of writing it, all with same result:
var source = $(slide).find('img').attr('src');
// or in native js
var source = slide.querySelector('img').getAttribute('src');
var source = slide.querySelector('img').src;
var source = slide.firstElementChild.src
Related
I have a page of about 15-20 YouTube videos I’d like to dynamically update the img src to point to the YouTube hosted thumbnails. From a logic perspective, I want to find every DIV with a class of “videos”, get the ID of that class and update the image source with the dynamically inserted value, e.g., http://img.youtube.com/vi/DbyNtAQyGs/0.jpg in the first example. All IDs are unique because they are the YouTube video IDs and there is only one img tag under each “videos” class.
This code would run on page load so it would have to be pretty fast to ensure the values are set before the browser passes the each img tag in the DOM. Hoping I can get one of those one liners instead of vars and multiple lines.
<div id="DbyNtAQyGs" class="videos">
<img src="" width="212" height="124" />
</div>
<div id="Fh198gysGH" class="videos">
<img src="" width="212" height="124" />
</div>
Current Code
$('.videos img').attr('src', 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id')); + '/0.jpg');
You can use:
$('.videos img').attr('src', function() { return 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id') + '/0.jpg'; })
Loop through the .videos elements:
$('.videos').each(function(){
var $this = $(this),
_id = $this.attr('id'); // Capture the ID
// Construct the img src
$this.find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg');
});
Bonus: chain in the click event for your anchor:
$this.find('a').click(function(e){
e.preventDefault();
loadPlayer(_id);
}).find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg');
So you can simplify your markup:
<div id="DbyNtAQyGs" class="videos">
<img src="" width="212" height="124" />
</div>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
$.getJSON("./data/data.json", function(json) {
console.log(json.length); // this will show the info it in firebug console
});
});
</script>
I know that json is my JSON object. I want to use that to manipulate my html
if it's the 1st item in my JSON object then
<div class="item active"> <!-- active only appears if it's the first item -->
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="json[0].image" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>json[0].quote</p>
<small>json[0].person</small>
</div>
</div>
</blockquote>
</div>
and I want to repeat the above code n times
There are many ways to do this, but probably the easiest way would be to build a string and append it to whatever container you want it to live in.
$.getJSON("./data/data.json", function(json) {
$.each(json, function(data) {
var html = '<p>' + data.quote + '</p>' +
'<small>' + data.person + '</small>';
$('#MySuperSpecialDiv').append(html);
});
});
Please note that this won't scale well. If you are going to add much more markup than you already have, you should really consider some sort of templating alternative.
Also, if some one comes in behind you to maintain this project, you probably won't be their favorite person.
I tried to implement a Lazy Load inside a popover.
For the lazyload, I use Echo.js (http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/)
In a table, I've cells like this :
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
As you can see, in my cell, i can see a loading gif, and according to the position the thumb is loaded.
Works pretty well
Now I want to load in a popover the full size image
I want to use quite the same technique to avoid the loading of all the full size images of my page
I keep the same table/cell thing, and add in my page an hidden div including
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
<div class='popTitle'>PopOver Title</div>
<div class='popContent'>
<img src='loader.gif' data-echo='image.jpg' class='img-rounded'>
</div>
</div>
And I'm stuck here, I only see the loading gif inside the popover, not the image.jpg I should be able to see
Here is the JS I use for the popover
$(".pop").each(function() {
var $pElem= $(this);
$pElem.popover(
{
placement: 'left',
trigger: 'hover',
html : true,
title: getPopTitle($pElem.attr("id")),
content: getPopContent($pElem.attr("id"))
}
);
});
function getPopTitle(target) {
return $("#" + target + "_content > div.popTitle").html();
};
function getPopContent(target) {
return $("#" + target + "_content > div.popContent").html();
};
Do you see what's wrong or what I missed ?
This is pretty my first attempt on this subject,
so I've read the others threads about, but I couldn't find a way to reproduce the results in my configuration
Using the comment above, I just changed a bit the line related to the image.jpg
<td>
<a id='pop-ID' class='pop'>
<img src='loading.gif' data-echo='thumb-image.jpg' class='img-rounded'>
</a>
</td>
<div style='display: none;' id='pop-ID_content' class='popSourceBlock'>
<div class='popTitle'>PopOver Title</div>
<div class='popContent'>
<img data-src='image.jpg' class='lazyload img-rounded'>
</div>
</div>
Now it works, thanks !
I'll try now to use lazysizes more widely to solve my problems
I have a page I'm using to grab image alt text from a slider. Each image has a different alt text, and I'm trying to pull it into an array and then loop through it to display it.
However when I implement it, it only adds one object to the array as opposed to how ever many it may ACTUALLY have inside the div.
$(document).ready(function () {
var tn_array = $("#rightSlider img").map(function () {
return $(this).attr("alt");
});
for (var i = 0; i < tn_array.length; i++) {
alert(tn_array[i]);
$('#links').append('<a href="#" title="' + tn_array[i] + '" >' + tn_array[i] + '</a><br />');
}
});
Here is the main page that the code grabs the alt text from:
<div id="rightSlider">
<div>
<img src="images/adptvtch_s1_1.jpg" alt="Hearing Aid On A Female's Ear" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_2.jpg" alt="Hands Reading Braille Book" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_3.jpg" alt="Man In Wheelchair Reading" width="330" height="215" />
</div>
</div>
I've tried other things such as .each and I can't seem to pinpoint why it's only adding the first alt text and not the other ones. If you guys can help me figure it out, I'd be greatly appreciative.
You don't need additional iteration and an unnecessary array manipulation.
Try this,
var xEle = $('#links');
$("#rightSlider img").each(function() {
xEle.append('<a href="#" title="'+ $(this).attr("alt") +'" >'+ $(this).attr("alt") +'</a><br />');
});
DEMO
I have built my first jQuery mobile image gallery, but I have a bug I can't seem to fix. When an image is tapped it pops up to full screen and to carousel all the images I can swipe the images or tap prev/next arrows.
Edit: The problem has changed slightly since I wrote this question, therefor I need to make a few changes in my question and my code.
The images now swipe to every other image, according to the order they are shown in the gallery. I'm dynamically adding a data-index to each image, but somehow the result is tabindex="0" for each image that pops up.
<body>
<!-- gallery content -->
<div data-role="content" id="pagecontent" class="gallerycontent">
<a href="#imgshow" data-transition="pop" data-rel="dialog">
<img src="../img/someimage.jpg" alt="someimage.jpg"/>
</a>
<!-- plus more unordered images -->
</div> <!--/content-->
</div><!-- /page -->
<!-- full screen image preview -->
<div data-role="dialog" id="imgshow" data-theme="d">
<div data-role="header" data-theme="d">
<div id="dialoghead"></div>
</div>
<div data-role="content" data-theme="d">
<center><div id="dialogcontent"></div></center>
</div>
<div data-role="footer">
<center>
Previous
Next
</center>
</div>
</div>
</body>
The 'on-touch' function and 'gonext' function in jquery.
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$(this).parent().addClass('selectedimg');
});
function gonext() {
var current = $('a.selectedimg');
if (current.hasClass('last')) {
var next = $('a.first')
} else {
var next = current.next();
}
var src = next.find('img').attr("src");
var alt = next.find('img').attr("alt");
next.addClass('selectedimg');
current.removeClass('selectedimg');
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
}
Any thought or hints?
I think the problem might be that the selectedimg class isn't being removed when the popup is opened. Try adding this line
$('.selectedimg').removeClass('selectedimg');
just before the addClass line into this function, like this:
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$('.selectedimg').removeClass('selectedimg');
$(this).parent().addClass('selectedimg');
});