I have a main image which is loaded each time with a different image if you rollover the thumbnail. There are 3 thumbnails.
There is also a lightbox effect and here is where my issue happens. Every time I click on the main image, no matter which of the thumbs has been loaded to the main image, image 1 is the one shown in the lightbox.
I clearly see where the issue is, but I am just wondering how I could make it so the image loaded in the mainImage container is the one shown in the lightbox.
Here is my code, maybe it explains better.
Thanks!
<div id="thumbs">
<img class="thumbSelected" src="images/<?php echo $row[thumb1]; ?>.jpg" /><br />
<img src="images/<?php echo $row[thumb2]; ?>.jpg" /><br />
<img src="images/<?php echo $row[thumb3]; ?>.jpg" />
</div>
<div class="mainImage">
<a href="images/<?php echo $row[image1]; ?>.jpg" rel="lightbox" title="<?php echo $row[name]; ?>">
<img class="mainImage" src="images/<?php echo $row[image1]; ?>.jpg" />
</a>
</div>
<script> ////large: ITEM1_01_large small: ITEM1_01_thumb
//
$('#thumbs').delegate('img', {
mouseover: function(){
$('.mainImage').attr('src',$(this).attr('src').replace('thumb','image'));
var $this = $(this),
index = $this.index();
$("#thumbs img").removeClass('thumbSelected');
$this.addClass('thumbSelected');
$("#big-image img").eq(index).show().siblings().hide();
}});
</script>
I can't really see what you are doing. However, if jQuery finds the first element and stop if you are using id selector. If you want to select multiple elements, you need to use class. That's what class is for.
Related
I have a 2-tab content slider for the mobile section of my site. The user clicks on the linked image within the <li> element and the corresponding content loads. I would like the image to change color when in an "active" state, so pretty much a new image to be loaded when the user clicks it.
This is only for mobile sites so please bear that in mind when offering solutions. Thanks All!!
<div id="tabs" class='tabs no-screen no-ie'>
<ul>
<li>
<img src="img/mobile/bingo.png" width="70" height="70" alt="Super Free Bingo" />
</li>
<li>
<img src="img/mobile/slots.png" width="70" height="70" alt="Super Free Logo" />
</li>
</ul>
<div id='tab-1' class="tab-box">
<?php include 'includes/sfb.php'; ?>
</div>
<div id='tab-2' class="tab-box">
<?php include 'includes/sfsg.php'; ?>
</div>
</div>
If I understood that correctly, when the user clicks the image, the image changes. Seeing as you only have two images, we can do the following:
Add a unique id to your target images.
<img src="img/mobile/bingo.png" id="image-1">
<img src="img/mobile/slots.png" id="image-2">
Add a JavaScript OnClick event for each image that will also reset the other image.
$('#image-1').click(function() {
$(this).attr('src', 'img/mobile/newImage1.png');
$(this).parent().parent().css('background-color', 'white');
$('#image-2').attr('src', 'img/mobile/slots.png');
$('#image-2').parent().parent().css('background-color', 'orange');
});
$('#image-2').click(function() {
$(this).attr('src', 'img/mobile/newImage2.png');
$(this).parent().parent().css('background-color', 'white');
$('#image-1').attr('src', 'img/mobile/bingo.png');
$('#image-1').parent().parent().css('background-color', 'orange');
});
Check This Demo for reference
Demo
$(".a").click(function(){
$(".a").each(function(index){
$("#id"+(index+1)+" a img").attr('src',a[index]);
});
var x=$(this).attr('id');
var y=x.split('id')[1];
$("#id"+(y)+" a img").attr('src',b[y-1]);
});
In Magento "best-sellers" block, I have fixed images that I want to replace with mouseover images.
Here is the initial code in best-sellers.phtml :
<div>
<a href="<?php echo $_product->getProductUrl($_product); ?>">
<img src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>" width=« 220" height=« 276" alt="<?php echo $_product->getName(); ?>" />
</a>
</div>
I changed the inital code to this :
<img onmouseover="this.src='http://www.mywebsite/media/wysiwyg/chaise-design-italie-hip_trans-Verso_1.png';
" onmouseout="this.src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>"
" src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>"
width=« 220" height=« 276" alt="<?php echo $_product->getName(); ?>" />
The result is : the source image appears, the mouseover image appears BUT nothing happens on mouseout, it keeps showing the mouseover image.
Any idea what I did wrong ?
Many thanks for your help !
please refer to this may be it can help you http://magentocodes.blogspot.in/2013/09/change-product-image-on-hover-in.html
I am building a webpage where i am displaying about 10 photos in a slider.The photos are being fetched from a folder where it is uploaded,the code is given below.
<div class="main">
<div class="main_slider">
<div id="bg"> <img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" /> </div>
<div id="preloader"> <img src="images/ajax-loader_dark.gif" width="32" height="32" /> </div>
<!--<div id="img_title"></div>-->
<div id="toolbar"> <img src="images/toolbar_fs_icon.png" width="50" height="50" /> </div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php
include("connect.php");
$s=mysql_query("Select image from gallery where active_home=1 ") or die(mysql_error());
while($row=mysql_fetch_array($s))
{
$img=$row["image"];
//$image= "<img src=\"images/gallery/$img\" width=200 height=120>";
echo "<div class=content_img>";
echo "<div> <img src=\"images/gallery/$img\" height=138 width=238 alt=image class=thumb style=opacity:0.6;/> </div>";
echo " </div> ";
}
?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
The page is loading very slow in the server and browser crashing frequently.I have tried reducing the image size but nothing improves.
You can clean up your code like this:
// Main PHP part
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
// Main HTML part
?>
<div class="main">
<div class="main_slider">
<div id="bg">
<img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" />
</div>
<div id="preloader">
<img src="images/ajax-loader_dark.gif" width="32" height="32" />
</div>
<div id="toolbar">
<a href="#" title="Maximize" onClick="ImageViewMode('full');return false">
<img src="images/toolbar_fs_icon.png" width="50" height="50" /></a>
</div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php foreach ($images as $image) { ?>
<div class="content_img">
<div>
<a href="images/gallery/<?= $image; ?>">
<img src="images/gallery/<?= $image; ?>" height="138" width="238" alt="image" class="thumb" style="opacity:0.6;" />
</a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
In that way, you have properly separated the HTML from the PHP. Now, all bugs should be more obvious and easier. You can add checks at the end of the PHP, you can forget about needing to escape the " with \" manually and your code is more focused and clean. Note that I've changed the code from mysql_ to PDO, so now it shouldn't really work (you need to create the $DB = new PDO(), normally in connect.php.
Even more, now you can test where the problem is by doing something like this:
$start = microtime(true);
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
echo "Load time: " . (microtime(true) - $start) . "<br>";
In that way you know if it's your PHP or your HTML (check it with the browser's network profiler) what takes ages to load.
Try
Jpeg images instead of png
Save images with option "Save image for web"
You can use RIOT image optimisation tool
For reducing load time you can use CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often used for mouse-over states on buttons. E.g. with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over the image.
Do not use an Image at all. we can generate rounded rectangles, gradients, drop shadows, and transparent images using CSS
I think you should try to store images on disk and check if images load faster from hard drive .
I've got this little project where I want to swap an image for another, and display the new image in a lightbox.
The code below works as follows; when I click one of the small images, the image src of the large image is replaced with the src of the small image. However, when I click the large image, it still opens the default large image in my lightbox.
Is there any way I can make the hyperlink href get swapped the same way the image src is swapped? They need to get the same value.
The javascript:
<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++) {
obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none";
}
}
}
function switchImg(i){
document.images["main-image"].src = i;
}
</script>
The HTML/PHP:
<?php
$image = 'main-image.jpg';
$small_1 = 'small-image-1.jpg';
$small_2 = 'small-image-2.jpg';
?>
<div id="holder">
<div class="large">
<a href="<?php echo $image; ?>" rel="lightbox">
<img id="main-image" src="<?php echo $image; ?>" />
</a>
<a class="original" onclick="switchImg('<?php echo $image; ?>')">Back to original image</a>
</div>
<div class="small">
<a onclick="switchImg('<?php echo $small_1; ?>')">
<img src="<?php echo $small_1; ?>" />
</a>
<a onclick="switchImg('<?php echo $small_2; ?>')">
<img src="<?php echo $small_2; ?>" />
</a>
</div>
</div>
to change the href:
document.getElementById('YOUR_ID').href = 'abraCaDabraDotCom';
I have created a gallery of images, thumbnails that when you click on them the large image is replaced with the image you have clicked on. Currently I have to write each file in html and create a seperate JS script for each file. This is an example of my current code:
Gallery:
<img id="bigPicMarie" src="assets/Images/MariePeterWeddingImages/Edited/KJ4V7314edit.jpg" alt="banner" />
<div class="captionBox">
<p id="captionText"></p>
</div>
</div> <!-- end of bigPicMarieContainer -->
<div class="floatFix"></div>
<div id="thumbnails" >
<div id="thumbContainerMarie">
<a class="galleryLink" onclick="putPic141();">
<img class="landscape" src="assets/Images/MariePeterWeddingImages/KJ4V7314editthumb.jpg" width="100" alt="thumb" />
</a>
<a class="galleryLink" onclick="putPic142();">
<img class="portrait" src="assets/Images/MariePeterWeddingImages/MM_24083editthumb.jpg" width="100" alt="thumb" />
</a>
<a class="galleryLink" onclick="putPic143();">
<img class="landscape" src="assets/Images/MariePeterWeddingImages/MM_24089editthumb.jpg" width="100" alt="thumb" />
</a>
JS:
//Marie&PeterWeddingAlbum//
function putPic141(){
document.getElementById('bigPicMarie').src = "assets/Images/MariePeterWeddingImages/Edited/KJ4V7314edit.jpg";
document.getElementById('captionText').innerHTML = 'IMG001';
}//end putPic141
function putPic142(){
document.getElementById('bigPicMarie').src = "assets/Images/MariePeterWeddingImages/Edited/MM_24083edit.jpg";
document.getElementById('captionText').innerHTML = 'IMG002';
}//end putPic142
An example of what the gallery looks like: http://www.jamielouise.co.uk/portraits.html
What I want is a way of making the gallery generate automatically from all the images in a specified folder. Ideally I would like to it to appear and function in the same way as it does currently.
First you need to read all images in a folder and create an array out of it. Solution in Php read directory file.
It would be much easier if you had the full size images in one directory and the thumbnails in another. Otherwise, the array build up will have to detect files with the thumb suffix and act accordingly.
With the array at hand, do a foreach and print the HTML. Note that single and double quotes have different uses in PHP.
/* Supposing an array like */
$images = array(
array( 'thumb' => 'thumb1url', 'full' => 'full1url' ),
array( 'thumb' => 'thumb2url', 'full' => 'full2url' )
);
echo '<div id="thumbContainerMarie">' . "\r\n";
$id_num = 1;
foreach( $images as $img )
{
printf(
'<a class="galleryLink" id="%s" onclick="%s"><img class="landscape" src="%s" width="100" alt="thumb" /></a>',
'galLink' . $id_num,
"putPic('" . $img['full'] . "');",
$img['thumb']
);
echo "\r\n";
$id_num++;
}
echo '</div>';
?>
<script type="text/javascript">
function putPic( url )
{
alert( url );
}
</script>
This creates the following HTML. Note the use of only one JS function with the value we need being passed to it:
<div id="thumbContainerMarie">
<a class="galleryLink" id="galLink1" onclick="putPic('full1url');"><img class="landscape" src="thumb1url" width="100" alt="thumb" /></a>
<a class="galleryLink" id="galLink2" onclick="putPic('full2url');"><img class="landscape" src="thumb2url" width="100" alt="thumb" /></a>
</div>
<script>etc...