I'm building an application in Rails that allows the user to upload a photo and then select one of four overlays that eventually will be composited onto it with Paperclip.
I'm new to Rails and I haven't been able to figure out how I pull the ID of a HTML element and store it in my database - I have this code:
<div>
<span id="overlay"></span>
</div>
<div id="overlay-select">
<ul>
<li><img id="overlay1" src="<%= asset_path '/assets/overlays/pink1.png' %>" /></li>
<li><img id="overlay2" src="<%= asset_path '/assets/overlays/green1.png' %>" /></li>
<li><img id="overlay3" src="<%= asset_path '/assets/overlays/blue1.png' %>" /></li>
<li><img id="overlay4" src="<%= asset_path '/assets/overlays/orange1.png' %>" /></li>
</ul>
</div>
And what happens is the user clicks #overlay1 - 4, and that img is then cloned and inserted into the #overlay span. I need to be able to grab the ID of whatever img is present in #overlay when the user saves the entry, I've looked for solutions as I don't know where to start but have come up short so far - any help would be greatly appreciated!
Here you are facing two issues. You cannot just clone the image, because you are using an id on these images. IDs must be unique. If you just clone the image, you could run into all sorts of js trouble, where element targetting fails and such. With that said, you can get around this by using a data attribute. Sample below.
Your html would remain similar except for the ids.
<div>
<span id="overlay"></span>
</div>
<div id="overlay-select">
<ul>
<li><img data-overlayid="overlay1" src="<%= asset_path '/assets/overlays/pink1.png' %>" /></li>
<li><img data-overlayid="overlay2" src="<%= asset_path '/assets/overlays/green1.png' %>" /></li>
<li><img data-overlayid="overlay3" src="<%= asset_path '/assets/overlays/blue1.png' %>" /></li>
<li><img data-overlayid="overlay4" src="<%= asset_path '/assets/overlays/orange1.png' %>" /></li>
</ul>
</div>
Your js would be. Would recommend using javascript for this. Also you will need to use ajax to actuallly send this to the server, unless you plan to do it using a post, or get method.
function getImgId(){
//Data for span
var overlaySpan = document.getElementById('overlay'),
imgs = overlaySpan.getElementsByTagName('img'),
imgsLn = imgs.length,
relevantSrc,//filled with relevant image source
relevantID;//filled with id of elem
if(imgLn > 0){//If there are any images
relevantSrc = imgs[0].src;
//Data for imagelist.
var overlaySelector = document.getElementById('overlay-select'),
overlayImgItems = overlaySelector.getElementsByTagName('img');//Would be most efficient to use query selector but then browser support would be sacrificed
for(var i=0;i<overlayImgItems.length;i++){
var imgItem = overlayImgItems[i];
if(imgItem.src === relevantSrc){
relevantID = imgItem.getAttribute('data-overlayid');
break;
}
}
return relevantID;
}
Related
I am working on a login/register page and i forget that how can i insert a link on a image. Here is my code...
<div class="social-media">
<ul>
<li><img src="images/facebook.png"></li>
<li><img src="images/twitter.png"></li>
<li><img src="images/linkedin.png"></li>
<li><img src="images/instagram.png"></li>
</ul>
</div>
</div>
How can i insert a link....
You have to use the anchor tag <a> for links in HTML.
Since you want an image to act like a link, enclose the <img> tag in the <a> tag like so.
<div class="social-media">
<ul>
<li><img src="images/facebook.png"></li>
.....
</ul>
</div>
</div>
I making a blog part with a buyed template.
I'm looking for add image in div. Something like that.
<div class="card card-raised card-background" style="background-image: url('<%= image_tag blog.couverture.url(:hd) %>')">
<div class="card-body">
...
Unfortunatly it's not working. So I looking for help after one hour of research on internet.
Thank you for you help.
Your image must be in "assets/images" folder on your rails proyect, then try this:
<div>
<img src="<%= asset_path 'image_name.format' %>" alt="">
</div>
I am trying to add a javascript image slider on a basic rails app. I added the JS file to assets/javascripts folder but my javascript is not executing.
I added my html file below. Can anyone one please tell me what am I missing?
<div class="slider">
<!-- Slideshow 3 -->
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 3
$("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
});
});
</script>
<ul class="rslides" id="slider3">
<li>
<div class="banner">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
<li>
<div class="banner banner2">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
<li>
<div class="banner banner1">
<h1>What a beautiful bike</h1>
<h2>timeless, atmospheric<br>& uncredible bikes!</h2>
</div>
</li>
</ul>
<ul id="slider3-pager">
<li><img src="assets/device3.jpg" alt=""></li>
<li><img src="assets/device2.jpg" alt=""></li>
<li><img src="assets/device1.jpg" alt=""></li>
</ul>
<div class="clearfix"> </div>
</div>
I need to access the asset_path of my images from a JST template that's used by my front-end for rendering with Underscore templates.
For instance:
filter_item.jst.ejs
<div class="filter-item">
<a href="#" class="thumbnail filter-select" data-preset="<%= preset %>">
<img src="<%= asset_path('balloons.jpg') %>"><br/>
</a>
</div>
How do I resolve 'asset_path' from my template to use the Rails asset pipeline? At the same time I want to be able to pass in the variable 'preset' from the Underscore template at run-time.
Example:
var rendered = JST["myapp/templates/filter_item"]({preset: "mypreset"});
I expect 'rendered' to contain HTML like so:
<div class="filter-item">
<a href="#" class="thumbnail filter-select" data-preset="mypreset">
<img src="/assets/balloons-ASSETHASH.jpg"><br/>
</a>
</div>
A few months old, but I struggled with this recently myself. Found the answer on the github page for sprockets
Add the extension .str to your files and you can use ruby/rails methods inside of the string interpolation tags: #{ ... }
So the above code modified to use string interpolation will work:
// filter_item.jst.ejs.str
<div class="filter-item">
<a href="#" class="thumbnail filter-select" data-preset="mypreset">
<img src="#{ asset_path('balloons.jpg') }"><br/>
</a>
</div>
As for the data-preset variable, I'm not familiar enough with how the asset pipeline works to say whether the above method would work for that.
I am getting multiple image url in imagedata in this program
' function onPhotoDataSuccess(imageData) {
{$("#"+divId).children().attr('src',imageData);}
'
also onclick i am getting divID and then showing image based on "img" tag ID.
so my question is that how do we store image url and retrieve one by one for specific "img" tag
<a class="img" id="Image1"><img id="smallImage1" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image2"><img id="smallImage2" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image3"><img id="smallImage3" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image4"><img id="smallImage4" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image5"><img id="smallImage5" src="" /></a>
<span class="textarea"></span>
</li>
<li>
<a class="img" id="Image6"><img id="smallImage6" src="" /></a>
<span class="textarea"></span>
</li>'
I'm not clear on what is your goal. Can you clarify your question " how do we store image url and retrieve one by one for specific "img" tag ?"
Do you want to store the img url offline in the app ?
Can yo show your code to get divID and show image based on "img" tag ID ?
Is this a hybrid worklight app ? If it is and what you want is to store the img url offline, than you can take a look at JSON Store feature documentation here
http://www-01.ibm.com/support/knowledgecenter/SSZH4A_6.1.0/com.ibm.worklight.dev.doc/devref/c_jsonstore_overview.html?lang=en
JSON Store is a feature to store data locally in JSON format.