http://www.leandrovieira.com/projects/jquery/lightbox/ sample
so i have get images in while loop here is my code
<td id="gallery">
<a href='<?=$path ?>'>
<img width="50" height="50" src=<?php echo $path; ?> />
</a>
</td>
$(function() {
$('#gallery a').lightBox();
});
</script>
when i click first image light box effect works fine but when i click second image light box effect does n't work please guide me
Thanks for Advance
The problem is you have multiple <td id="gallery". You shouldn't use the same id for multiple elements, because $('#gallery') would always return the first one, but also because it's wrong!
Either move it into the table: <table id="gallery",
or change it to class: <td class="gallery" and change the query: $('.gallery a').lightBox();
Related
I have a far loop which check the number and output the result to number of that.
For exmaple, in below picture the "cut image" is displayed in multiples times. I have tag in the far loop so it outputs the image according to number of times. And that number come from database.
MY Question.
Obviously all the images in first row will have same ID. Currently user can only click the first image of the row. I would like to give each element different ID if possible. Than I would like to use JQuery to add click event. So if I click on 4th image in first row, it alert message and if i click 5th image it shows different alert message.
How I can assign different ID to each element in far loop so it does only make first Image clickable but instead all elements clickable.
My loop
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img alt="" class="yellow-process center-block " id ="cut-full-roll-<?php echo $row['id_vnr']; ?>" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
My jquery selector
If I can give each element different ID, than I can do something like this to add clicked event to clicked image.
jQuery( "#vinyl-roll-down-<?php echo $row['id_vnr']; ?>" ).click(function() {
But I need help assign different unique to each element in far loop.
Thanks in advance.
I think your loop in PHP is okay like that.
The problem lies in your jquery, try getting the right id by using use attribute
selector attr("id").
jQuery( ".yellow-process" ).click(function() {
var selected = jQuery(this).attr("id");
alert(selected); // to show the selected image id
// use the variable selected to do something with it.
}
After trying this jquery code you could advance it for your use.
You can try this
In html:
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img id="image{{$x}}" alt="" class="yellow-process center-block " onclick="imageClick(<?php echo $row['id_vnr']; ?>)" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
in jquery
function imageClick(id) {
alert(id);
var imageId = jQuery(this).attr("id");
alert(imageId);
// your code
}
I thigh it will help you.
$( ".yellow-process" ).bind("click",function() {
var selected = $(this).attr("id");
alert(selected); // to show the selected image id
// use the variable selected to do something with it.
});
Your php code written in the right way and working as expected just for jquery above is the working code
The images are stored in my folder and not in database. When i click on one of the images, it will lead me to see more info on the next page. This would means that i can see the image with a bigger size.
How do I do this with less php pages created? Below are snippets of my codes
<table>
<tr>
<th class="timgB"><h4><img src="city/GVcementMixture.jpg" style="vertical-align: text-bottom;" title="Cement Mixture"/> Cement Mixture </a></h4></th>
</tr>
</table>
You could keep it all in one form/page with a big if/else or switch/case statement to evaluate the selected image and show only info pertaining to the selected image such as the full size image or a sub-set of child images. But it would be best presented in jQuery as #Razor said.
<form ...>
<button type=submit name=imgID value=1>
<button type=submit name=imgID value=2>
...
<?php
if (isset($_POST['imgID'])):
// Show info related to selected image
...
you can do it like this. use class="small for make image size small and class="big-img" to big size image. the ?img=img23.jpg in your link decide which image should be shown with big size. or if you use thumbnail of image as small size and want to show a full size only when some one click on thumbnail then update the link in upper div (class="big-img") or leave comment.
//it will work as you want
<body>
<div class = "big-img"> <!-- set class to show big size image-->
<?php if(isset($_GET['img'])): ?>
<img src="city/.<?php echo $_GET['img']; ?>" alt="">
<?php endif; ?>
</div>
<table>
<tr><!-- set class to show small size image-->
<td class = "small"><img src="city/img23.jpg" alt=""></td>
<td class = "small"><img src="city/img24.jpg" alt=""></td>
<td class = "small"><img src="city/img25.jpg" alt=""></td>
</tr>
</table>
</body>
I am creating a website that has an image gallery.
You have a side menu with the different categories, a hidden div that appears when you click on a category, filled with thumbnails, and when you click on any of the thumbnails it hides the thumbnails div and shows the image gallery in its place.
An example of what I am trying to do is here : http://www.matitacorp.com/web/portfolio.php
What I would like to do is when the thumbnail div hides and the image gallery appears I would also like the image that corresponds to the thumbnail clicked to appear, even if it is 3 or 4 pictures lower in the scrollable thumbnail gallery.
I've tried using .scrolltop() and setting the value but I think that I am missing something. My div's appear properly but I am not getting the scrolltop value to work or I am using the complete wrong function. Hopefully someone can help out.
Here is a piece of the code that I am trying to use:
//thumbnail section
<div id="booth">
<img src="thumb1" alt="" />
<img src="thumb2" alt="" />
<img src="thumb3" alt="" />
</div>
//main image section
<div id="identityOverlay" style="background-image:url(images/bkgrnd_700.gif); height:720px; display:none;">
<div id="imageGallery style="padding-left:95px; padding-top:10px; padding-bottom:15px; overflow:auto; height:610px;">
<img src="mainImg1" /><br />
<img src="mainImg2" /><br />
<img src="mainImg3" /><br />
</div>
</div>
<script>
$("#identityoverlay").click(function () {
$("#identityOverlay").show();
$("#booth").hide();
});
$("#identityoverlayA").click(function () {
var myCont = document.getElementById ("imageGallery");
myCont.scrollTop(100);
$("#identityOverlay").show();
$("#booth").hide();
});
</script>
Thanks!
Well you have couple problems with your code.
First of all you should prevent default action on click and secondly you should hide/show divs first and then scroll to wanted position.
Here is the modified code:
$("#identityoverlayA").click(function (e) {
e.preventDefault;
$("#booth").hide();
$("#identityOverlay").show();
var myCont = document.getElementById ("imageGallery");
myCont.scrollTop(100);
});
I am having problem in fix layout of categories of video in firefox it works normally in google chrome but in firefox the table which is align center is leave its place and make horizontal scroll bar enable it need some expert hand in smarty I am showing the smarty coding please guys help me yiu guys can also check Page Where Firefox Givin Prob.
Check this page in Google Chrome and in Firefox its works well in Chrome but not in Firefox please help me
<div align="center">
<table border="0" align="center">
{section name=i loop=$cat step=4 max=6} <!--ROWS EG change max=???-->
<tr>
{section name=cat loop=$cat start=$smarty.section.i.index max=4}<!-- COLUMNS EG change max=??? to the ammount and step=??? to the same ammount-->
<td align="center"><b>{$cat[cat].name}</b><br /><img border="0" width="153" height="120" src="{$cat[cat].picture}" {if $firefox eq "1"}class="reflect" alt="No Image Yet"{/if} /></td>
{/section}
</tr>
{/section}
</table>
</div>
Put br as first element inside your div:
<div align="center">
<br/>
<table border="0" align="center">
.
.
or you can add a clearer after your search section:
.
.
</div>
<div style="clear:both"></div>
<div align="center">
.
.
The reason why the issue occurred is because your search section's div, which is float to left, overlaps your second div and pushes the table. After adding a clearer, the first div has something to push instead of your table.
i have bellow code which display 10 items and each item in each of table
<div class="baner_main shadow">
<div id="adds">
<div class="latest_ads">
<table border="0" cellspacing="0" style="width:800px">
<tbody>
<tr class="">
<?php
for($i=;$i<=10;$i++)
{
?>
<td class="even">
<img src="images/photo.gif" alt="" title=""><br>
<h3>Item Name</h3>
<p><strong>Price: 70.00 USD <br> () <br> December 3, 2011</strong></p>
</td>
<?php
}
?>
</tr>
</tbody>
</table>
</div>
</div>
</div>
in 800 width of table it only show 5 items on screen one time.
what i need is
Move the first item and bring the next five items automatically after 10 sec using Jquery.
A small dot under table to move items next and previous with jquery.
this is common in image slide shows but i can't find any idea how to do with table.
if available give me any example link and i will it myself.
Thanks
You can use jQuery cycle plugin http://malsup.com/jquery/cycle/ and check http://malsup.com/jquery/cycle/div.html for grouping set of items together. Most of the examples provided are Div based layouts. However, You can achieve the same effect using TD's as well. Let me know if you still need help