Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Enlarge

Posted on 2013-07-01
9
Medium Priority
?
405 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
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

[Webinar] Cloud Security

In this webinar you will learn:

-Why existing firewall and DMZ architectures are not suited for securing cloud applications
-How to make your enterprise “Cloud Ready”, and fix your aging DMZ architecture
-How to transform your enterprise and become a Cloud Enabler

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

916 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