Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/
Related
I have
<div class="box box1">
<div class="content">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div>
</div>
What I want to do is make the entire div of box clickable.
I have looked around here in StackOverFlow and seen some great examples but I have tried them and I could not get them to work.
For Example:
$div.next('div.box2').find('a').attr('href', $div.find('a').attr('href'));
Any help would be great on how to do this in jquery
$(".box").click(function(){
window.location=$(".whereeveryourelookingfor").find("a").attr("href");
return false;
});
you can make the mouse pointer also look like the one on href , use the following css
.box{ cursor:pointer; }
http://jsfiddle.net/r9Xhf/
<div class="box box1" style="cursor: pointer">
<div class="content">
<a href="example">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div></div>
JS
$('.box').click(function(){
window.location.href = "http://www.example.com";
});
I'm trying to display a photo gallery with jQuery. This is my code:
<script>
$("#vsetky").click(function(){
$("#obrazky").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>
When the #vsetky element is clicked... It works, every picture is displayed.
When the #c element is clicked, there aren't any pictures.
I tried to use
$("#obrazky > #cervene").show();
I've tried other methods but nothing is working. Help me please - what am I doing wrong?
What does your css look like? If both #obrazky and #cervene have display:none, then when you click on #c you're only removing the display:none rule from #cervene, but not it's parent wrapping div#obrazky.
Edit:
You'll want to change the css to be hiding #cervene, #zlte, and #zelene, and then show and hide those individually with the javascript. If an element's parent is has display:none, then 'show()'ing it with javascript doesn't to anything because you're not removing the display:none from the parent.
<script>
$("#vsetky").click(function(){
$("#cervene, #zlte, #zelene").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<style>
#obrazky {display:inline-block;}
#cervene, #zlte, #zelene {display:none;}
</style>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>
HTML
<div class="page-content">
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
</div>
jQuery
$(".page-content .image").each(function(i) {
//$(this).closest('.gallery') ??
});
How can I find/select the "next" or "following" .gallery for each `.image``
So when running through the each() loop I want the first gallery for the first image.
When running through the second .image I want to find the .gallery that is "underneath" the second .image in the dom-tree.
Any idea how to do so?
This plugin was written for exactly this. Disclaimer: I wrote it
http://techfoobar.com/jquery-next-in-dom/
$(".page-content .image").each(function() {
$(this).nextInDOM('.gallery');
});
$(".page-content .image").each(function() {
$(this).parent().next('.gallery');
});
Edit : For your updated question:
$(".page-content .image").each(function() {
$(this).parent().nextAll('.gallery:first');
});
See a sample here
One possible solution:
$(".page-content .image").each(function() {
$(this).parent().next(".gallery");
});
Here parent() goes up to <div class="something"> and next(".gallery") gets next sibling element with "gallery" as a class name (if exists).
For the updated question you may use .nextUntil() method:
$(this).parent().nextUntil(".gallery").next();
I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.
I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.
I looked through the FAQ but couldn't figure out what was causing this (in js). I'm trying to get something live soon and I'm bypassing better animation for the time being, possibly also AJAX.
What I'm going is bringing two external php pages a includes to the current page, one is a gallery slider and the other is where the gallery imagery will appear. Here is a link to the page I'm currently testing so you can see:
http://www.chrisjohndesigns.com/artwork-conventions.php
So the code I've used has been simple replacement .innerHTML calls where the left and right arrows call the next gallery div and then the thumbnails within that gallery call the artwork that appears below. The left and right arrows work just fine but as soon as any of the thumbnails are clicked (and they do work properly) the left and right arrows stop working and you're stuck on whatever frame you chose from.
Here is the code from the conventions page:
<div id="field">
<div id="gallery-callout">
<div class="thumbs-slider-field-container" id="generic-slider">
<div class="thumbs-slider-field" >
<div id="prev">
<img src="images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
</div>
</div>
<div class="rule">
</div>
<div class="entry" style="margin-bottom:0px;">
<h4 style="color:#ffffff; margin:0px;">| artwork > conventions</h4>
</div>
<div class="gallery-frame" id="generic">
<h1 style="margin-top:5px; margin-bottom:10px;">CONVENTION ARTWORK</h1>
<div class="artwork">
<img src="images/artwork/portfolio-design/logos/atomic-heart/atomicH-heart_0910.png" />
</div>
<div class="rule">
</div>
<p>Here you will find arwork produced for (or for sale at) the conventions that Atomic Glam attends. Our premier convention is Anime Weekend Atlanta held in Atlanta each September.<br />(Above: The Atomic Heart Logo of Atomic Glam)</p>
<div style="display:none;">
<?php include("artwork-gallery-digital.php"); ?>
<?php include("sliders/slider-artwork-conventions.php"); ?>
</div>
</div>
The js I'm using:
<script type="text/javascript">
altViews = function(next_img) {
document.getElementById("bigPicture").src = next_img;
}
function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
function callSlider(slides) {
var target2 = document.getElementById('generic-slider');
var slides = document.getElementById(slides);
target2.innerHTML = slides.innerHTML;
}
</script>
An example of the slider:
<div class="thumbs-slider-field" id="conventions1">
<div id="prev">
<img src="../images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="../images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="../images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="../images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="../images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="../images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="../images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
Any thoughts why one is canceling out the other?