Solved

Enlarge

Posted on 2013-07-01
9
363 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 26

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 26

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

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 26

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 26

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Log4Net custom Appender not being fired. 5 45
Responsive CSS question 2 42
ajax form sumbit 3 27
ASP.NET reading ATOM 2 27
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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…

759 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now