I have an image gallery that I'm working on
example: http://imagethrow.com/design-studio-all-throws.html
right now it only displays images, I'd like to have it so each image has a caption either above or below the image.
this is the html part of the gallery:
<a class="imgLink" href="path-to-the-image.jpg">Image name</a>
<img src="" id="theImage">
jquery:
<script>
$(document).ready(function(){
$('.imgLink').click(function(){
var imgPath = $(this).attr('href');
$('#theImage').attr('src',imgPath);
return false;
});
});
If it's possible to tweak the above code to add a caption that would be ideal.
You need to add a new html tag to contain that caption, you could use a div for example
Add the jquery code to select that div and change the text
Here you have an example: http://goo.gl/h8JJk3
Related
i want to make a website that allow users to input questions, and then the website will display some pictures related to user input
i tried to wrap the output in img src tag, however the output is simply a line of code instead of picture
<img src="path/reply.jpg" width="68" height="90" alt="reply">
how can i tell the website to recognize it as a picture and display it ?
is it possible to extend this function to embed youtube video etc. ?
==================================================================
Added some scripts below, i guess this is the code that limiting output as text only.....
function createRow(text) {
var $row = $('<li class="list-group-item"></li>');
$row.text(text);
$chatlog.append($row);
}
Update: i amended $row.text(text); to $row.html(text); , it can properly display html code now.
you can use ParentNode.append() function to append new image element to your html. (documentation here: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append)
Example:
var yourImage = document.createElement("img");
yourImage.src = "some/dynamic/source.jpg"
document.body.append(yourImage);
It is very simple, just try the following changes:
Add id attribute to your img tag:
<img src="path/reply.jpg" width="68" height="90" alt="reply" id="img1">
And in Jquery:
$(document).ready(function ()
{
$("#img1").attr({ "src": "img.jpg" });
});
This question has already been asked, but has no answer - I believe because not enough information was provided.
I am using the bxslider as my template. See here:
http://bxslider.com/examples/image-slideshow-captions
I can create a very simply caption using the "title" attribute, but I want to be able to create subtitles (with different attributes like smaller text) and I want to turn this into a link. I've tried implementing a div within the container, and perhaps obviously, I can't get that to sync with the slider without implementing it with jquery. I've also tried editing the CSS to no avail.
How can I add a caption that more than just an image title? Like a div overlaying the picture?
You don't even need to use the captions option provided by bxslider.
Add the captions as part of the li tag that forms your slide. That's what the captions:true option does anyways, i.e appends the div with bx-caption class to your slide.
For eg:
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
<div class="caption1">
<span>Image 1</span>
<div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
</div>
</li>
This way using css, you can play around with the font sizes too.
Here's the the fiddle http://jsfiddle.net/s2L9P/
I think I solved your problem, but I can't test it because your fiddle doesn't work as you created it.
Change the code from Appends image captions to the DOM with this:
/**
* Appends image captions to the DOM
* NETCreator enhancement (http://www.netcreator.ro)
*/
var appendCaptions = function(){
// cycle through each child
slider.children.each(function(index){
// get the image title attribute
var title = $(this).find('img:first').attr('title');
var nc_subtitle = $(this).find('img:first').attr('nc-subtitle');
// append the caption
if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) {
$(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>');
}
});
}
Now you can add subtitles to your caption titles:
<a href ="page.php">
<img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/>
</a>
You can style the subtitle as you want to, using the CSS class nc_subtitle.
Hope it helps!
EDIT
Change the entire JavaScript shared by you in fiddle with this:
http://pastebin.com/0fvUezg1
And the HTML with this:
http://pastebin.com/T038drDV
It works.
The title of my question needs more explanation...
I'm building a site for a rugs company. Last week I placed a question to make an accordion menu place an image in a different div
Image presentation using an accordion menu
but now, I was required to append more info to the images.
So... I have a menu like this:
<ul class="leve1">
<li>
<div class="some">
image1
image2
image3
...
</div>
</li>
...
</ul>
Update
New day, new thinking...
my menu has changed a bit and my question changed also...
I need to add to the site a div with the specs of each rugtype, but only to be displayed when you click on a link.
I place the rug image in a div next to the menu using:
$("div.some a").click(function (event) {
event.preventDefault();
$("div#dest").html($("<img>").attr("src", this.href).fadeIn(1000));
});
Is there any way for me to get the rugtype info from the href above?
Try adding the img element using html method. After it, find it using the find method and apply and fadeIn effect, for sample:
$("div.some a").click(function (event) {
//prevent default
event.preventDefault();
// get the href property
var href = $(this).prop('href');
// find the div and add a img with display:none, locate the img and fadeIn
$("div#dest").html("<img src='" + href + "' style='display:none;' />")
.find('img')
.fadeIn(1000));
});
I've got some server side PHP code that dynamically displays thumbnails of all the images contained in a directory:
<form>
<input type="hidden" name="animal">
<div id="thumbs">
\\ Dynamically created thumbnails start
<img src="images/bat.jpg">
<img src="images/cat.jpg">
<img src="images/rat.jpg">
\\ Dynamically created thumbnails end
</div>
</form>
I want the correct jQuery syntax so that when a user clicks on one of the images it:
Removes border styles from all of the thumbnails
Highlights the selected thumbnail by adding a coloured border
Changes the value of the form field "animal" to the file name shown in the image.
Any help much appreciated.
demo: http://jsfiddle.net/9rFKB/
jquery
$('#thumbs').delegate('img', 'click', function() {
var $this = $(this);
// Clear formatting
$('#thumbs img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field "animal" to the file name shown in the image.
$('[name="animal"]').val( $this.attr('src').substring($this.attr('src').lastIndexOf('/')+1) );
alert( $('[name="animal"]').val() );
});
css
.border-highlight {
border:5px dashed red;
}
I've used delegate instead of click since you have stated that the images are to be created dynamically.
If by "removes formatting on thumbnails" means removing all css on your images, then I think what you want is this.
I have created the following effects on the images seen here.
You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.
What jQuery or javascript code do I need to do this?
p.s. How do I properly post the code I have now. I tried to paste code in "enter code here," but received errors
This is fairly simple if you add rel="img-id" to each link you want to hide or show as follows:
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#">sunimg</a>
<a id="plane" href="#">planeimg</a>
<a id="nano" href="#">nanoimg</a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: Sun
2nd: Airplane
3rd: Nano
</div>
</div>
And then update your ready function jQuery as follows:
// target each link in the navigation div
$('#navigation a').click(function(e) {
// link that you clicked
clicked = $(this).attr('id');
// this is faster than the .each() you used
$('#navigation a').removeClass('active');
$(this).addClass('active');
// hide all links, then show the one with the same rel as the id clicked
$('#popuptext a').hide();
$('#popuptext a[rel='+clicked+']').show();
// prevent the default link action
return false;
});