Solved

Enlarge

Posted on 2013-07-01
9
392 Views
Last Modified: 2013-08-08
Hi expert. How to implement it per the attached image. When the user clicks the image on the bottom, it will be displayed on the top. While the user clicks the top image, the top image will be enlarged. Thank you!
Image.jpg
0
Comment
Question by:jessyj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
9 Comments
 
LVL 27

Accepted Solution

by:
skullnobrains earned 500 total points
ID: 39292348
big image
<img id="bigimage" src="whatever" onClick="window.location=this.src" />

small images
<img src="small_image_thumbnail" onclick="javascript: document.getelementById('bigimage').src=this.src />
0
 

Author Comment

by:jessyj
ID: 39293774
Hi skullnobrains. Thank you!
Regarding enlarging the single image, it is not a problem. But how to fix the code below which has programmed 99% based on my attached image. The only problem now is the enlarging image doesn't work and I can only get the first image working (zoom in). Could someone help? How to fix the following code to zoom in the each image accordingly. Thank you!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel </title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
 
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />
 
<script type="text/javascript">
 
var mycarousel_itemList = [
    {url: "images/1.jpg", title: ""},
    {url: "images/2.jpg", title: ""},
    {url: "images/3.jpg", title: ""},
    {url: "images/4.jpg", title: ""}
   
];
 
function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }
 
        if (i > mycarousel_itemList.length) {
            break;
        }
 
        // Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
     
        carousel.add(i, item);
    }
};
 
/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
   return '<a href="' + url_m + '" title="' + item.title + '"'+
' onMouseOver="showIt(this)"' +
' onClick="return showIt(this)"><img src="' + item.url + '"  width="75" height="75" border="0" alt="' + item.title + '"  /></a>';};
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});
function showIt(link) {
  document.getElementById('img').innerHTML='<img src="'+link.href+'" />'
  document.getElementById('imgTitle').innerHTML=link.title
  return false;
}
 
</script>
 
</head>
<body>
<div>
<div id="img" style="height:300px; width: 300px; border: 1px solid gray;"><img src="images/1.jpg" /></div>
<span id="imgTitle"></span>
<div id="wrap">
   
  <ul id="mycarousel" class="jcarousel-skin-ie7">
   
  </ul>
 
</div>
</div>
test
</body>
</html>
0
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39296715
sorry but

- i do not understand most of what you wrote. i mean the english part, not the code and specifically this : "which has programmed 99% based on my attached image"

- i downloaded the version of jquery you are using and the jcarousel i found here : http://sorgalla.com/projects/jcarousel/ which is not the same one as yours, and in which the basics do not work

i have no time to try all the jcarousel versions around. give an url or enough information so i can debug in a reasonable amount of time IE not spent hours just to setup the environment and/or guess about the libraries you are using.
0
Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

 

Author Comment

by:jessyj
ID: 39301176
Hi expert. Thank you! How to add the hyperlink to the title? e.g. when the the first image is displayed as title, it will be linked to another image.  Thank you!
var mycarousel_itemList = [
    {url: "images/1.jpg", title: "the first image"},
    {url: "images/2.jpg", title: "the second image"},
    {url: "images/3.jpg", title: "the third image"},
    {url: "images/4.jpg", title: "the fourth image"}
   
];
0
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39301733
i really cannot help you along this line :

you need to provide a link where people can try the code

and/or

you need to make yourself clear

"add the hyperlink to the title" -> THE ? which one
"the first image is displayed as title" -> how would you display an image as a title ?
"it will be linked to another image" -> IT (the image) will be linked to another image ?

try something like
"i'm in such a situation, i click on this item, i want this to happen"

maybe some people can do better than i can, but i cannot figure out what you want. it's a pitty because the code is rather trivial
0
 

Author Comment

by:jessyj
ID: 39372742
I've requested that this question be deleted for the following reason:

Resolve it myself
0
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39372743
i do not care about points, but may i dare point out the following

- your question did not mention carousel, titles, extra-links, or your own code, and is actually answered by the 2 lines of code in my very first post

- EE allows you to post an answer and accept your own answers. if you resolved it yourself, would you kindly share the answer so others can make good use of it ?
0

Featured Post

Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question