I'm terrible at javascript and css, but I did manage to implement the Jquery Cycle plugin into my homepage. I tried to add thumbnails, so while it's still cycling on auto, the end-user can click a thumbnail to go back, instead of having to wait 8 or 9 slides later.
javascript code:
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
// dynamically add a div to hold the slideshow's pager
$(".homepageimages").before('<div class="pager"></div>');
// now to use the cycle plugin
$(".homepageimages").cycle({
pause: 1,
pager: ".pager"
});
}
</script>
HTML code:
<div id="slideshow">
<div class="homepageimages"
<asp:Hyperlink ID="HyperLink1" runat="server"
ImageUrl="~/images/usshomepagegraphic.jpg" height="319" width="864"
NavigateUrl="~about.aspx" Target="_self"></asp:HyperLink>
<asp:Hyperlink ID="HyperLink4" runat="server"
ImageUrl="~/images/collage.jpg" height="319" width="864"
NavigateUrl="~services.aspx" Target="_self"></asp:HyperLink>
</div>
</div>
css:
.slideshow {
height: 319px;
width: 864px;
padding: 0;
margin: 0;
}
.slideshow img {
padding: 0px;
border: 0px solid #ccc;
background-color: #eee;
width: 864px;
height: 319px;
top: 0;
left: 0
}
Here's a photobucket link to what I'm looking at. The picture is of my cycler, and the pager link is in the upper left -- just text numbers 1-7, for all 7 slides:
http://s1209.photobucket.com/albums/cc387/jdluski/?action=view¤t=jquerythumbnails.png
But I cannot turn these text numbers into thumbnails. Whenever I try, from the Jquery Cycle's instructions or some other persons's online instruction, usually the pictures just end up right on top of one another, or I get a long, huge error message in my browser.
I'd like to continue cycling on auto, but have thumbnails in case the end user wants to go back, but I'm at an impasse. I'm to the point now where I'm so confused, I don't know what to even try to tinker with, the jquery.cycle.all.js file, the javascript, the css, the html.
Thanks a bunch for reading this, and all help would be sincerely appreciated!
Jason Weber
As you are not good at JS try using this plugin which is ready to serve your purpose.
http://wayfarerweb.com/jquery/plugins/simplethumbs/
It has ready thumbnail option.
Related
quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.
Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.
I'm attempting to make it so that the images on my web page when clicked, will show a fullsized image. However, my javascript doesn't seem to be happy with what I have in my fiddle.
I have to use the source of the image due to my images being linked to a pagegridview in ASP.Net, and I have it linked to a property I called imgFull. The code on the fiddle is for testing, my actual code is below:
CSS:
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
Javascript:
$("img").click(function(){
$("#imgBig").attr("src", $(this).attr('fullImg'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
HTML in ASP.NET:
<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent">
<asp:Image runat="server" ID="imgFull" ImageAlign="AbsMiddle" Width="400" ImageUrl="https://www.google.com/images/srpr/logo11w.png" CssClass="imgBig"/>
</div>
Javascript is not my forte, as soon as this project is over I intend on taking some time to learn it but at present, I have to go with the "Drink from a fire hose" approach and hope I can retain what I'm using. Any assistance is appreciated.
You had a typo:
$("#imgSmall").click(function(){
$("#imgBig").attr("src"; $(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
The semicolon in your assignment to src should be a comma:
$("#imgSmall").click(function(){
$("#imgBig").attr("src", $(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
One of the first things you should learn is to use your browser's developer tools. Chrome has wonderful tools baked in (Hit F12), but Firebug for Firefox is also great for Javascript debugging.
i am developing a webpage which has two images both set to 512x400px settled in a div
on page load, the first image displays, then on a time delay a second image floats from behind to in front of the first image, the top image is a transparent png,
i have got the jquery working and loks great, the first image loads then after a few seconds the second image appears sliding from the left under the first and over the top of the first image,
the second image is transparent during the transition and i can see the first image all the way upto the poiint that the second image lands directly over the first, then the area turns white,
i checked firebug and the image on top is definatly png, ???
can anyone help ?
below is my code 'thats works apart from the final stage transparency bottom image show through'
html
<div class="slider">
<ul id="slider1">
<li><img src='<%# /* Graphic ADOR */ AdorRec.FieldValue("ShopExit", Container) %>' alt="Cross-Media Finnished Shopping" width="512" height="400" />
</li>
<li>
<img src='<%# /* Graphic ADOR */ AdorRec.FieldValue("MobileOffer", Container) %>' alt="Cross-Media Mobile SMS Offer" width="512" height="400" /></li>
</ul>
</div>
css
.slider {
margin: 0 auto;
width: 512px;
height: 400px;
border: 8px solid #ffffff;
border-radius:5px;
-moz-border-radius: 5px;
box-shadow: 2px 2px 4px #333333;
background:transparent;
}
script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
and
<script language="javascript">
$(document).ready(function(){
$('#slider1 a:first').css({opacity: 1.0});
$('#slider1') .cycle({
fx: 'shuffle',
//'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
autostop: 1,
rev: 1,
speed: '2000',
timeout: 3000
});
});
</script>
please bare in mind i am a very noob at this, and thank anyone for there time in responding
regards matt
Have you checked your second image? Here's a fiddle using your code and the example photos from the Cycle plugin site. I can reproduce your error by providing a broken image link for the second photo.
You also might want to consider using #slider1 {list-style: none;} to get rid of those bulleted list items
Fiddle - http://jsfiddle.net/N4aJU/
At the moment I have a website that grabs the 12 most recent posts from a category, and displays them as a link to their permalink, with the post thumbnail image as the link image.
You can see a working example here: http://mathewhood.com/sitefiles/
What I want to do, is somehow add functionality into my loop that will allow me to make it so that when you click on one of these list elements, it will display the_content(); for each element.
I found this - http://gsgd.co.uk/sandbox/jquery/easing/ Which I think may provide the functionality that I want (ideally jswing in and out), but I am struggling at implementing it! If anyone knows how I could make this happen please answer this and receive your well deserved up-votes!
http://jsfiddle.net/XzJgU/ - Here is my current loop so far, any help will be greatly appreciated!!!!!!!!!
Here is my solution to your problem. I'm giving an example on how to implement jquery Easing.
EDIT
revised my post, please
View revised sample here
Hope it helps.
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});
Something like that should work - http://jsfiddle.net/XzJgU/5/. It renders the content for each post in the loop, hidden by default using CSS. When a post is clicked, it moves its content to #displayed-post, making it visible. When another post is clicked, its moves back to its original container and the new post content is moved there.
I'm not entirely clear on how you want this to work - are you looking for a PHP solution or a JavaScript one or perhaps a mix of the two. I've got two suggestions on how you might make it work. Also, note that the jQuery library you're referring only adds easing options to jQuery - i.e. it only deals with animation and not with the business logic and behaviour of your code.
Using ajax
This should work in this case since you're not making cross-domain requests. Essentially, you'd intercept the click to the link, figure out where it's pointing and then make a GET request to that page. You'd then filter out the appropriate HTML from the response and put it into your page. Something like this:
$('.recentPost a').click(function(){
$.get($(this).attr('href'), function(data){
//make a get request to the page the link linked to
//and extract the blog content div
$("placeholder").html($(data).filter(".blogRight"));
});
return false; //cancel the browser's default action on click to keep user on page
});
where you'd have a <div id="placeholder" /> in your HTML page where you'd like the content to appear.
Using PHP + JavaScript
Instead of fetching the content on demand, you'd generate it when the page loads but keep it hidden. You'd again intercept clicks but this time you'd find and display the appropriate, existing div on the page.
So your generated page would look something like this:
<div id="contentWrap">
<div class="hidden-featured-content" id="content-f12">
<div>Your content here</div>
</div>
<div class="hidden-featured-content" id="content-f11">
<div>Your content here</div>
</div>
<div id="newBanner"></div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" />
<a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
<div class="captionTitle">Hello World 12!</div>
<p></p>
</div></a>
</div>
<div class="recentPost">
<img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" />
<a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
<div class="captionTitle">Hello World 11!</div>
<p></p>
</div></a>
</div>
...
You could then use something like to toggle the appropriate content
$('.recentPost a').click(function(){
if($(this).attr('id')){
var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
$('.displayed').hide().removeClass('displayed'); //hide already displayed content
$('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
return false;
}
});
There are a number of ways to achieve this. The most efficient would probably be a full ajax solution but that would require a Wordpress plugin and some advanced scripting.
The most straightforward solution would be to add a box for dynamic content, output the content for each post in a hidden DIV under it's permalink/image, then use javascript to move content from the hidden DIVs to the dynamic content box when a permalink is clicked. I've worked up some code at http://jsfiddle.net/HF9Pr/.
Try this:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>
<body>
<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>
<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>
</body>
Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.