Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Enlarge

Posted on 2013-07-01
9
Medium Priority
?
398 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 2000 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)
Suggested Courses

670 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