I have a simple html page and I want to make a very simple gallery to it with fancybox.
Here is the code for one image:
<a class="gallery" href="img/83.jpg"><img src="img/83k.jpg" alt="" /></a>
Problem is, I have 400 of them and I have to make it sequential, like:
<a class="gallery" href="img/84.jpg"><img src="img/84k.jpg" alt="" /></a>
<a class="gallery" href="img/85.jpg"><img src="img/85k.jpg" alt="" /></a>
etc...
Hand coding it would be such a pain.
How can I generate all of it?
Thanks!
Create a container where you want to generate your galleries like:
<div id="galleries"></div>
then use this code:
$(document).ready(function(){
var i = 83; // select your initial number
for (i=83; i<=483; i++){ // loop as many images as you need
$("div#galleries").append('<img src="img/' + i + 'k.jpg" alt="" />');
} // for
// and set your fancybox script afterwards
$('.fancybox').fancybox({
// fancybox options
}); // fancybox
}); //ready
Related
I am trying to understand what I'm doing wrong,
I have two elements, image withing anchor with no style.
some how the anchor dose not cover the image area.
example: http://jsfiddle.net/L4ShV/1/
<a href="javascript:void(0)" id="downloadLink" >
<img src="http://toonimo.com/testing/clients_tests/somoto/flv_player/images/nlp/free_download_btn.jpg" border="0" style="width: 373px;height: 120px;" />
</a>
<div>
<h1>a dimantions:</h1>
width: <span id='width_c'></span><br>
height: <span id='height_c'></span><br>
<br>
when clearly its not possible!
How can i get the Real height?
</div>
<script>
var el = document.getElementById('downloadLink');
document.getElementById('width_c').innerHTML = el.offsetWidth;
document.getElementById('height_c').innerHTML = el.offsetHeight;
</script>
any reason or solution for this problem?
That is a normal behaviour of anchor as it expects for block-level elements. You can float a to cover the image.
<a href="javascript:void(0)" id="downloadLink" style="float:left">
I want to change the set of 5 image on page refresh called in html.
the images should called this under the body tag:
<img src="images/side-logos/1.jpg" alt="">
<img src="images/side-logos/2.jpg" alt="">
<img src="images/side-logos/4.jpg" alt="">
<img src="images/side-logos/5.jpg" alt="">
I want to called the set of images under the body tag not in javascript.
I have searched a lot on website but everyone calling the image in javascript not under the body tag.
So Please help me if anyone has the solutions for it.
just replace onclick event with window refresh event
HTML
<div id="box">
<img id="image" />
</div>
<br />
<input type="button" value="Randomize!" onClick="randImg()" />
JS
var images = [
"http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = images[x];
}
randImg();
demo
EDIT
new_demo
Unfortunateley, you can only do this with javascript.
To do that, here is some code that is placed in the tags
<script type="text/javascript">
function Randomize() {
var images = new Array("one.jpg","two.jpg","three.jpg","four.jpg");
var imageNum = Math.floor(Math.random() * images.length);
document.getElementById("divid").style.backgroundImage = "url('" + images[imageNum] + "')";
}
window.onload = Randomize;
</script>
The name of the images shoukd be in the images array and the "divid" is where you want the images to appear.
I want to count the images displayed in a page using capybara.The html code displayed below.for that i use following code to return the total count but the count returns 0.In my page i have 100 more images.
c= page.all('.thumbnail_select').count
puts c(returns 0)
HTML
<a class="thumbnail thumbnail_img_wrap">
<img alt="" src="test.jpg">
<div class="thumbnail_select">
<div class="thumail_selet_backnd"></div>
<div class="thumbil_selt_text">Click to Select</div>
</div>
<p>ucks</p>
<span class="info_icon"><span class="info_icon_img"></span></span>
</a>
<a class="thumbnail thumbnail_img_wrap">
<img alt="" src="test1.jpg">
<div class="thumbnail_select">
<div class="thumail_selet_backnd"></div>
<div class="thumbil_selt_text">Click to Select</div>
</div>
<p>ucks</p>
<span class="info_icon"><span class="info_icon1_img"></span></span>
</a>
.........
.........
How can i count the total images?
You have a few options.
Either find all div's with class thumbnail_select by using all("div[class='thumbnail_select']").count
But this is an awkward way of doing it since it looks for the div and not the images.
A better way would to be to look for all images using all("img").count as long as no other image is present on the page.
If neither of these works either the problem might be that your page is not loaded when you start looking for the images. Then just simply put a page.should have_content check before the image count to make sure that the page is loaded.
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>
I have created a wordpress blog for images. While publishing all the posts, I didn't use wordpress editor to upload images. Instead, I used FillaZilla to upload the images. Then, in the wordpress editor, I manually wrote only the image tag (below) in all the posts and published it. All posts contain no text, but only images. Like this,
<img alt="" title="" src=""></img>
Now what I want to ask you is that I want the images in all the posts to get auto hyperlink address same as the image src. I have more than 200 blog posts in my wordpress blog. I don't want to edit all of them one by one. Here's the coding of the wordpress content area,
<div class="post-entry">
<p><img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="sun" alt="sun" /></p>
</div>
Could anyone please help me on this? how can I add hyperlink to the images? Is there any code which I can put in the post-entry div in my wordpress theme page?
#chandu-vkm explained (in the comments) exactly what I was looking for. Now I have one more question. When I add a a span tag before img , the code #chandu-vkm mentioned doesn't let me add span tag right before img tag. Instead it places the place tag outside the p tag, like in the code below.
<div class="post_div">
<span class="entry"></span>
<p>
<img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="Cute Teddy Bear" alt="Cute Teddy Bear" />
</p>
</div>
But I want span to be placed right after p, like this.
<div class="post_div">
<p>
<span class="entry"></span>
<img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="Cute Teddy Bear" alt="Cute Teddy Bear" />
</p>
</div>
Somebody please help me out.
you can do it with some jquery
<div class="post_div">
<img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="sun" alt="sun" />
</div>
like this
$('.post_div img').each(function(){
$(this).wrap(function() {
return '<a href="' + $(this).attr('src') + '" />';
})
});
here the sample http://jsfiddle.net/a4PYd/
If you are certain that all your post content contains only the <img> tag, you can add this snippet of code to your functions.php file:
function hyperlink_all_my_content( $content ) {
$link = "http://www.somelink.com";
return "<a href='$link'>$content</a>";
}
add_filter( 'the_content', 'hyperlink_all_my_content' );
Note that this will link all your content, even on your wordpress pages.
EDIT:
function hyperlink_all_my_content( $content ) {
$matches = array();
$nummatches = preg_match("/src=['|\"](.*)['|\"]/", $content, $matches);
return "<a href='" . $matches[1] . "'>$content</a>";
}
add_filter( 'the_content', 'hyperlink_all_my_content' );