I want to create a menu in my web page, where each list item is represented by image. When mouse point at some of these images, this image should fade out and be replaced by another image (I think fadeIn() would be useful).
HTML code:
<ul id="buttons">`
<li><a href="#" onmouseover="change(1)" onmouseout="ret(1)">
<img src="button01.png" id="button01_1" />
<img src="button01_hover.png" id="button01_2"/>
</a></li>
<li><a href="#" onmouseover="change(2)" onmouseout="ret(2)">
<img src="button02.png" id="button02_1" />
<img src="button02_hover.png" id="button02_2"/>
</a></li>
</ul>
jQuery - I´m new in using jQuery, I tried this, but there are many mistakes. Pictures are not changing properly - "fadeIn" picture changes position (every list item is absolutely positioned), and first image is disapperaing and appearing constantly. Here´s the code:
function change(i)
{
switch(i)
{
case 1:
$("#button01_1").fadeOut(500);
$("#button01_2").fadeIn(500);
break;
case 2:
$("#button02_1").fadeOut(500);
$("#button02_2").fadeIn(500);
}
}
(ret(i) is similar..)
Thanks for help..
You're nearly there but i can simplify:
<ul id="buttons">
<li>
<a href="#" id="link1">
<img src="button01.png" id="button01_1" />
</a>
</li>
<li>
<a href="#" id="link2">
<img src="button02.png" id="button02_1" />
</a>
</li>
</ul>
jQuery code:
$('#link1').hover(function(){
$('#button01_1').fadeOut(500).attr('src','button01_hover.png').fadeIn(500);
},function(){
$('#button01_1').fadeOut(500).attr('src','button01.png').fadeIn(500);
});
With the selectors you could remove the id button01_1 and replace the jQuery selector to $('img','#link') to accommodate.
sorry if I've used too much of the jQuery library than javascript.
Function explained:
$('#link1').hover(function(){ --initial function on hover-- },function(){ --coming out of the hover-- });
EDIT :
jQuery library : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Add the library to your html page
I think the problem is the fact that fading out an image also triggers a mouseout, (since it has display:none once the fade out completes), which in turn triggers a fade in, and so on. Consider rethinking your logic.
Updated:
use like this :
<ul id="buttons">
<li><a href="#" onmouseover="change($(this),1)" onmouseout="ret($(this),1)">
<img src="button01.png"/>
</a></li>
<li><a href="#" onmouseover="change($(this),2)" onmouseout="ret($(this),2)">
<img src="button02.png"/>
</a></li>
</ul>
jquery :
function change(elem ,i){
$(elem).find('img').fadeOut('500',function(){
$(this).attr('src','button0'+i+'_hover.png').fadeIn('2000');
});
}
function ret(elem ,i){
$(elem).find('img').fadeOut('500',function(){
$(this).attr('src','button0'+i+'.png').fadeIn('2000');
});
}
I hope that work ...
Related
I have a gallery with thumbnails,
After I hover on thumbnail the main photo is changing to the hovered one.
But I need help with magnifying the main photo.
I tried many free magnify scripts but none of them worked well.
Always when I hovered on any other thumbnail and then again on the main photo it showed the previous one or didn't work.
HTML
<div class="imgBox"><a href="big/default1.png">
<img src="small/default1small.png" class="zoom"/>
</a></div>
<ul class="thumb">
<li>
<a onclick="return false" target="imgBox" href="small/default1small.png">
<img src="small/default1small.png"/>
</a>
</li>
<li>
<a onclick="return false" target="imgBox" href="small/default2small.png">
<img src="small/default2small.png"/>
</a>
</li>
</ul>
JS with JQUERY
$(document).ready(function(){ $('.thumb a').mouseover(function(e){
e.preventDefault();
$('.imgBox img').attr("src", $(this).attr("href"));
$('.imgBox a').attr("href", $(this).attr("href"));
$('.imgBox a .magnify .magnify-lens').css("background","url('$(this)') 0px 0px no-repeat");
})
})
After I hover on thumbnail and again hover on the main photo I expect it to magnify properly
https://codepen.io/anon/pen/zgxaRX
i have jquery slider. this slider has images and thumb nails of those images. i would like to replace images and thumbnails respectively which comes from jquery ajax call.
this is my slider code:
<ul id="thumbs" class="slides">
<li id="firstthumb" data-thumb="images/s/img8.jpg">
<img id="firstimage" src="images/s/img8.jpg" />
</li>
<li id="secondthumb" data-thumb="images/s/img10.jpg">
<img id="secondimage" src="images/s/img10.jpg" />
</li>
<li id="thirdthumb" data-thumb="images/s/img9.jpg">
<img id="thirdimage" src="images/s/img9.jpg" />
</li>
<li id="fourththumb" data-thumb="images/s/img11.jpg">
<img id="fourthimage" src="images/s/img11.jpg" />
</li>
<li id="fifththumb" data-thumb="images/s/img3.jpg">
<img id="fifthimage" src="images/s/img3.jpg" />
</li>
</ul>
I have replaced images with following code:
$('#firstimage').attr('src', message[22]);
$('#secondimage').attr('src', message[23]);
$('#thirdimage').attr('src', message[24]);
$('#fourthimage').attr('src', message[25]);
$('#fifthimage').attr('src', message[26]);
here message[22]... are urls of images. its working perfectly. but i don't know how to replace thumb nails images. give me some idea. thank you.
Can you try this,
$('#firstimage').attr('src', message[22]).data('thumb', message[22]);
Try this
$('#firstthumb').data('thumb', message[22]);
OR
$('#firstthumb').attr('data-thumb',message[22]);
I am sorry for the title. I don't no how to write the title for the below scenario .
The below question would be easier for an expert. Kindly bear with my English.
I am creating a single page portfolio. In the web site I have top menu,breadcrumb,content & footer.
If i click any menu or submenu the corresponding div is loading properly but I want to change my breadcrumb dynamically based on the menu
Here is the HTML code for top menu
<div id="eyMenuNav">
<ul id="navmenu">
<li class="on">
<a class='link1' href="#first">Article on Technology</a></li>
<li>
<a class="sub" href="#">Success Stories</a>
<ul>
<li>
<a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
</li>
<li>
<a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
</li>
<li>
<a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
</li>
</ul>
</li>
<li>
<a class='link5' href="#five">Hexaware Key Contributor</a>
</li>
</ul>
</div>
Here is the HTML code for breadcrumb
<div id="eyBreadCrumb">
<ul>
<li>
<a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
</li>
</ul>
<!-- Clearing Element -->
<div style="clear:both;"></div>
<!-- end breadcrumb --> </div>
Here Is the code for javascript which i tried it is working for one menu click but i want for all.
function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}
Kindly help me for the above scenario
Note : I am not using jquery only iam working with javascript.
Thanks
Mahadevan
Add this parameter to your onctext() call, so your menu items look like so:
<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>
And then change your onctext function to retrieve the text from this:
function onctext(elm) {
var text = elm.innerHTML;
document.getElementById("crumb").innerHTML = text;
// set active class
var active = document.getElementsByClassName('active')[0];
if (active) {
active.className = active.className.replace(' active', '');
}
elm.className += ' active';
}
I am using photoswipe to show my gallery when clicking on a item.
My markup:
<ul id="gallery_mobile_about">
<li>
</li>
<li>
<a href="/files/uploads/Figues-de-Moro.jpg" style="background-image: url('/files/uploads/Figues-de-Moro.jpg');" data-iframe="" data-pos="1" data-url="/files/uploads/Figues-de-Moro.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" style="background-image: url('/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg');" data-iframe="" data-pos="2" data-url="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Deia-Church-on-Cala-rock.jpg" style="background-image: url('/files/uploads/Deia-Church-on-Cala-rock.jpg');" data-iframe="" data-pos="3" data-url="/files/uploads/Deia-Church-on-Cala-rock.jpg" class="gallery-item ui-link">
</a>
</li>
</ul>
The js:
$(document).ready(function(){
var myPhotoSwipe = $("#gallery_mobile_about a").photoSwipe(
{ enableMouseWheel: false ,
enableKeyboard: false }
);
});
The problem is that even that the gallery seems to load, as a backgound i see a white page with the text 'undefined' and on closing the galler page will stay as this white page (is not returning to the original view)
The result (hit on a image where it says 5 items in gallery): http://deia.info/m/?lan=2&task=view_post&catid=14&blogid=25
What am I seem to be missing here?
Adding rel="external" solved this
I allready have the attribute rel="external" and trying things this works for me.
var myPhotoSwipe = $("#Gallery a").photoSwipe({
//your others attributes
target: 'html'
});
I have a label in navigational breadcrumb:
<li>Eligibility</li>
Please keep in mind, i am very new learning .NET.
On this page there is iFrame content, where you click a link to view the respective content:
<ul id="ss-categories" >
<li class="eligibility">
<a href="#" onclick="ChangeFrame('mem_eligibility.aspx');")>Eligibility</a href>
</li>
<li class="deductible">
<a href="#" onclick="ChangeFrame('mem_deductible.aspx');")>Deductible</a href>
</li>
<li class="claims"><a href="#" onclick="ChangeFrame('mem_claims.aspx');")>Claims & EOBs</a href>
</li>
<li class="benefits">
<a href="#" onclick="ChangeFrame('mem_benefits.aspx');")>Benefits</a href>
</li>
<li class="hospital">
<a href="#" onclick="ChangeFrame('mem_priorAuth.aspx');")>Hospital Admissions</a href>
</li>
<li class="priorauth">
<a href="#" onclick="ChangeFrame('mem_Inpatient.aspx');")>Prior Authorizations</a href>
</li>
And the iFrame displays the content based on the link you click:
<iframe id="ctl00_middleContent_frame1" style="float:left" scrolling="auto" frameborder="0" height="400" width="100%" src="mem_eligibility.aspx">
In that navigational breakcrumb at the top, how would i code it so that it will change, based on the section of content displayed in the iFrame.
i.e. (in lehmans terms)
if iFrame src="mem_elibigility.aspx" {
document.write = 'Eligibility'
}
if iFrame src="mem_deductible.asps" {
document.write = 'Deductible'
}
Hope that makes sense, and yes i know my code is complete garbage... and is not structured right, but thats not my job at the moment...
Updated Version:
The following stores the urls that control your iFrame as title attributes and it uses jQuery to set the title of your "header" area. I tried to clean up a bit of the code as well, but this should work for exactly what you need:
jQuery (Example):
$(document).ready(function(){
$('#ss-categories li').click(function()
{
var test = $(this).text();
$("#title").text(test);
//Code to change iframe based on property of the item clicked goes here
var title = $(this).attr("title");
$('#ctl00_middleContent_frame1').attr('src', title);
});
});
HTML (Example):
<ul id="ss-categories" >
<li class="eligibility" title="mem_eligibility.aspx">
Eligibility
</li>
<li class="deductible" title="mem_deductible.aspx">
Deductible
</li>
<li class="claims" title="mem_claims.aspx">
Claims & EOBs
</li>
<li class="benefits" title="mem_benefits.aspx">
Benefits
</li>
<li class="hospital" title="mem_priorAuth.aspx">
Hospital Admissions
</li>
<li class="priorauth" title="mem_Inpatient.aspx">
Prior Authorizations
</li>
<li id="title" style="font-size: x-large; font-weight: bold">Eligibility</li>
<iframe id="ctl00_middleContent_frame1" style="float:left" scrolling="auto" frameborder="0" height="400" width="100%" src="http://www.google.com">
Try this demo to see if that is the functionality you want : Updated Demo
Older answer:
Is something like this demo what you are looking for?
Code:
$(document).ready(function(){
$('#ss-categories li').click(function()
{
var test = $(this).text();
$("#title").text(test);
//Insert logic here to change iFrame based on clicked item
});
});
It creates a function that will grab the "name" of one of your links in the list and it will display that in your "title" area. If I understood you correctly - I think this will do what you need.