I got a (maybe a bit silly) question.
I'm making a photo gallery using javascript. I need to give every image some information (a id), so i can ask javascript what image is currently open.
Example:
I got a array of some images. Those images have a id 1, 2 and 3. When I'm using the gallery to slide through the images, I want to know what image Im looking at.
It can be done by giving the images alt the information I need. So I can go like;
var id = document.getElementById("image").alt;
But I though this wasn't the way to do it. Is there a simple solution for this problem?
I assume you have multiple <img> elements. You could give each of them the same class value so you can easily get a reference to all of them. You could then use data- attributes for any data you want to assign to them.
<img class="gallery-image" data-id="1" ...
<img class="gallery-image" data-id="2" ...
<img class="gallery-image" data-id="3" ...
JavaScript
var images = document.getElementsByClassName('gallery-image');
for (var i = 0; i < images.length; i++) {
var id = images[i].getAttribute('data-id');
...
}
You can add/remove a custom attribute using jquery to your image to indicate it's active:
$(..).attr('c-active', true);
will result:
<img src=".." c-active/>
Setting it to false will remove that attribute.
Since the attribute isn't a standard html syntax, some framework / browser might not be happy about it.
You can also use jquery data:
$(..).data('c-active',true);
$(..).data('c-active',false);
Or just keep a simple javascript variable to indicate which image id is active (but you will have to update this everytime the image slides)
var activeId = 5;
Related
I have the following html.
<div class="new-row>
<img class="trash" src = "trash.png">
<img class="trash" src = "trash.png">
</div>
<div class="new-row>
<img class="trash" src = "trash.png">
<img class="trash" src = "trash.png">
</div>
Also I have the following jquery code
$(".trash").on("click",trashClicked);
How can I get the number of (".trash") in each new-row class. I don't want to get the total number of img tags with class trash. I want to get the specific number of img tags with class trash when a trash image is clicked in specific new -row
Inside trashClicked, this will refer to the specific img that was clicked. You can then work from there to figure out how many .trash imgs there are in that row:
Your img elements are siblings of one another, so you could use siblings:
var count = $(this).siblings().length + 1; // + 1 for the one we're calling it on
A more general solution would use closest to find the enclosing .new-row, and then find to find all of the .trash elements, even if they're at different levels.
var count = $(this).closest(".new-row").find(".trash).length;
It's well worth your time to read through the jQuery API, beginning to end. It doesn't take long, and it repays the time you spend doing it almost immediately.
I'm trying to make an image which changes based on clicking on images in a list.
The only trouble is, the images in the list have their url embedded in a style as a background-image.
How would I call the url of the img src to the new image?
<ul id="swatchList_att1"><li class="Name AttributeSwatch In_stock colourSwatch" id="attributeSwatch_1" data-attname="att1" data-attvalue="Deep Blue (001)" data-atrsku="0012345" style="background-image: url(https://color.adobe.com/api/v2/themes/2022184.png);">
EDIT
Wow, great response time.
and
Wow, I phrased this incredibly poorly yesterday. Apologies.
The list "swatchList_att1" is a group of color swatches which are shrunk to 50% of the jpeg size.
All I'm trying to do is create a sort of "Preview" image which sits in a different div and will show a selected color swatch at an inflated size (110%). On page load, it would be the first color in the list. When a click occurs on a color in the group of color swatches, the "Preview" image would change to what color was clicked.
I can't make changes to how these list items work (i.e. change it to "data-background") because the functionality behind the scenes would break. Annoyingly, I can't do much about that. These list objects need to have their image defined in "style", for whatever reason (I don't know). I can, however, add an onclick function to the list (if I had something that could apply it to all items in the list, which all have very long and different names).
Thus I need to extrapolate the url from the "style" onclick and have "Preview" img src change to that url.
In response to BearSkyView:
Since it's a seperate image, this isn't exactly what I meant. Also, I'd need something which applied an onclick to everything in the list.
In response to somethinghere:
That is more closely along the lines of what I'd like to accomplish, but as I can't change the way these list objects are made, this sadly won't work for me.
http://api.jquery.com/css/
$('#attributeSwatch_1').css("background-image", new src here);
EDIT: Are you looking for something like this? http://jsfiddle.net/rsqtL805/
Since you are using data-attributes anyway, why don't you put it into one? Say data-background="URL".
<img src="" id="myImageElement" alt="large image" />
<img src="path/to/image.jpg" data-background="path/to/image.jpg" onclick="setImg(this); return false;" alt="thumbnail" />
function setImg(obj){
var img = obj.getAttribute('data-background');
document.getElementById("myImageElement").attribute("src", img);
}
Otherwise you can read the background image property and split it in javascript to retrieve the URL and do with it as you like:
var img = this.style.backgroundImage;
img = img.split("rl(")[1].split(")")[0];
The above will take the following string:
url(path/to/image.jpg);
And split it first into:
[0] => u
[1] => path/to/image.jpg)
And then we split the element at place 1 at the ) and select the remainder at index 0.
[0] => path/to/image.jpg
[1] =>
With that you could do
document.getElementById("myImageElement").attribute("src", img);
to set the src of the image element to the just retrieved source.
I am trying to display some instagram photos in a jquery carousel and for some reason the pictures are displaying in reverse order and all of the photos are not displayed in the carousel slider.
The JavaScript i am using is as follows:
function(data) {
for (i=0; i<20; i++){
$("#carousel").prepend("<li><a target='_blank' href='" + data.data[i].link + "'><img src '" + data.data[i].images.thumbnail.url + "'></img></a>");
}
}
The HTML:
<ul id ="carousel" class="elasticslide-list">
<li></li>
</ul>
Prepend will reverse something.
Think about a prepend b prepend c, etc:
a -> ba -> cba -> dcba -> ...
Use append instead.
As for missing images, my guess is that there are more than the hard coded twenty.
Try:
for (i = 0; i < data.data.length; ++i)
Also, the i should be declared somewhere. Hopefully it's declared at a higher scope and isn't an implicit global.
It would be a bit overkill, but if you wanted, you could also use jQuery's each:
$.each(data.data, function() {
//"this" is now each of the data.data entries.
//like this.images or this.link
});
Edit: It also looks like you're missing an = for your src attribute on the img tag.
I also might be tempted to set the src with DOM manipulation since it's possible that it won't be escaped properly if you have a quote inside of the file name (which probably won't happen).
You could try this approach (see jsbin example), using layerJS and vue.js, I used images from flicker because this doesn’t need an api key.
Gesture movements work as well and you can have different types of transitions between them.
Basically you add a stage div put a layer and add as many frames as you want between for the images.
The HTML would look something like this:
<div data-lj-type="stage">
<div data-lj-type="layer" data-lj-default-frame="image1">
<div data-lj-type="frame" data-lj-name="image1" data-lj-neighbors.b="image2" class="frame">
<image src="img/1.jpg" />
</div>
<div data-lj-type="frame" data-lj-name="image2" data-lj-neighbors.b="image3" class="frame">
<image src="img/2.jpg" />
</div>
</div>
</div>
Hope this can help you and others in the future.
disclaimer: I work on the layerJS open source library that I used here.
I am setting up a "Billboard" for the home page of a site. The billboard will have an active image displayed and there will be thumbnails of the right that are used to change the image on the billboard.
Something like this:
Currently I swap the images like this:
<div id="_bbImage">
<img src="images/bill1.png" class="bbImage" id= "MainBB"/>
</div><!--_bbImage-->
<div id="_bbTab1" class="inactiveTab">
<a href="images/bill2.png" onclick="swap(this); return false;">
<img src="images/bbtab1.png" class="bbTabImg" id="bbTabImg1" />
</a>
</div><!--bbTab1-->
and the JavaScript function looks like this:
function swap(image){document.getElementById("MainBB").src = image.href;}
But now, I would like to have the thumbnail to have a different class when Its selected or "Active" to achive this effect:
I need to accomplish the class switch to active, but I also need to make sure that the previously selected tab gets set back to the "inactive" class again.
I tried something like this:
function inactiveTab(name){document.getElementById(name).className = "inactiveTab";}
function activeTab(name){document.getElementById(name).className = "activeTab";}
function inactiveTabAll(){
inactiveTab("_bbTab1");
inactiveTab("_bbTab2");
inactiveTab("_bbTab3");
inactiveTab("_bbTab4");
inactiveTab("_bbTab5");
inactiveTab("_bbTab6");
}
with:
<div id="_bbTab1" class="inactiveTab">
<a href="images/bill1.png" onclick="swap(this); inactiveTabAll(); activeTab("_bbTab1"); return false;">
<img src="images/bbtab2.png" class="bbTabImg" id="bbTabImg1" />
</a>
</div><!--bbTab1-->
But this doesn't seem to be working, when I click on the thumbnail I just get linked to a blank page with "image/bill2.png" image displayed.
Does anyone know a good way to accomplish this, or can anyone point me in the right directions.
Thanks in advance,
Rob
In my opinion, you could have a look at the following jquery method:
http://api.jquery.com/hover/
It has callback functions, where you can make your content visible / invisible.
Instead of your "inactivateTab" - function, you could use the "hide"-method:
http://api.jquery.com/hide/
the problem is that you are using an href for the image inside the tag.
an tag is originally a link to a given url
replace
href="xx.png" with
href="javascript:swap(this); inactiveTabAll(); activeTab("_bbTab1");"
I don't understand what's the original role of the href in your code, but you don't seem to be using it anyway
Instead of img elements, use divs and put the image into the background (use the background-image style). This allows you to define which image should be displayed where in pure CSS. You can also swap images by adding/removing classes:
.bbTabImg { background-image: url(images/bbtab1-inactive.png); }
.bbTabImg.active { background-image: url(images/bbtab1.png); }
As for inactive, use this jQuery:
$('.active').removeClass('active');
This finds all elements with the active class and turns it off. Now you can set one of them active again and the CSS above will load the correct image.
Actually what i'm doing is to find the <img> image tags and get its src attribute to change them.
I already got upto this point but the problem more is: To get the edited the html source back (to put into the database.)
To say more brief & clearly, i'm about to grab some Dynamic Html Containers and then change the image paths and save the whole source chunk back.
For brief example if i search inside $(div.container).html() on this:
<div class="container">
<..> .. </..>
<..>
<img src="images/apple.jpg" />
<..>
<img src="images/banana.jpg" />
</..>
</..>
</div>
Firstly, lets say <..> represent any of not previously knowable html tags.
Then i will get:
var dom_contents = $("div.container").html();
Now i got the original html source inside the target container <div>
Then lets say i need to change each <img src with sample/ for its folder. It will then be fruits/apple.jpg and fruits/banana.jpg.. etc.
I still getting some of the stuffs like:
$("div.container).each(function() {
var arr = $(this).find("img");
for (var i=0; i<arr.length; i++) {
var img_src = $(arr[i]).attr("src");
/*
* I NEED TO CHANGE THE IMAGE SRC HERE
*/
}
});
** Finally, i need to save this the whole edited html source into the database. **
So how do i change the <img src='' .. and
How do i get this whole edited html source, back from the jQuery?
Amend the source attribute for each image as follows. You don't need to write the html back. The source html will be updated:
$("div.container").each(function() {
$(this).find("img").each(function() {
$(this).attr("src", "/image/url/file.png");
});
});
To get the html source of the container, use the following:
$("div.container").html();
This will set the attribute:
$(arr[i]).attr("src", mynewsrcvalue);
Once you're done just send the innerHTML (or .html()) back in an AJAX request. But if you want this stuff in a database, why not just manipulate the source on the server side in the first place?