opencart product carousel and popup magnifition of product image after click on it
Hi dear anthers,
I have a problem in opencart product carousel that when my customers are clicking on the image of product block in product carousel it shows the image of product instead of redirecting customer to the page of product. How can I make it so that when I choose inspect element it shows in the code file a jquery icon at the end of code row. The jquery code box in debugger contains a magnificent popup code for showing an image. So how can I disable it so that when a customer clicks on the image of product, a product page opens after.
This is the code of product:
<div class="image clearfix">
<a class="img" itemprop="url" title="Kunc euismods" href="http://localhost/pavo1/index.php?route=product/product&product_id=138">
<img class="img-responsive" itemprop="image" src="http://localhost/pavo1/image/cache/catalog/demo/cosmetic/4c-199x201.jpg" title="Kunc euismods" alt="Kunc euismods">
</a>
</div>
you'll need to change the class name "image":
<div class="image clearfix">
to something else, or change the jQuery trigger at the very bottom of the page, as this makes the links within the <div class="image"></div> all behave as Gallery Popups.
$(document).ready(function() {
$('.image').magnificPopup({
type:'image',
delegate: 'a',
gallery: {
enabled:true
}
});
});
Personally I'd go for changing the class as the Magnific popup is tied into several features throughout the Opencart system.
Related
I found many codes but not working for me, I want to share a page but show particular block or div from my entire page when I share with image and title on Facebook.
when I share result should look like.
my code
<div class="content">
<div id="mImageBox">
<img id='my_image' src='https://i.imgur.com/C8VWSZP.jpg' alt='tis is title' width="100%"
onclick="fbs_click(this)"/>
</div>
<script>
function fbs_click(TheImg) {
u=TheImg.src;
// t=document.title;
t=TheImg.getAttribute('alt');
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;
}
</script>
</div>
My code work perfect only for image share not working for image and Page URL. i want to share current page URL. it should be dynamic.
I made a "musicbox" which shows a music cover and when hovered over it shows a toggleable playbutton, to either play or pause the music.
Now what i want to achieve is the following:
When clicked ON the play/pause button the music will play or pause (did this part)
when clicking anywhere on the cover except the play/pause button it should link (href?) to another page
I tried several things but cannot get the playbutton excluded from the href, i think it should remain inside the ".overlay" because they contents need to be hidden unless you hover over the div/musicbox
echo"
<div class='musicbox' align='center'>
<a>
<div class='overlay'>
<img data-value='../../admin/uploads/tracks/".$music_track."'
data-value='../../admin/uploads/tracks/".$music_oggfile."'
onclick='updateSource(this)' class='btnplay' src='../media/images/go.png'></img>
<img class='btnpause' src='../media/images/stop.png'></img>
<div class='desc'>".$music_title."</div>
</div>
</a>
<img class='cover' src='../../admin/uploads/images/".$music_image."' width='350' height='350'>
</div>";
My friend has asked me to help them move images around on their wordpress site. They have an image slideshow that runs along the bottom of the page and the image gallery that shows, depends on the page template used.
One template has the following code:
<?php
$tagu = get_post_meta($post->ID,'bototm_gallery');
?>
<div class="flt box_bottom">
<ul style="margin-left:10px !important; width:100% !important;" class="sub_photo sub_photo_gigs" class="sub_photo">
<?php echo do_shortcode($tagu['0']); ?>
</ul>`
and another page template shows this code:
<?php $tagu = get_post_meta($post->ID,'bototm_gallery'); ?>
<div class="flt box_bottom">
<div class="sv_footer_photo">
<?php echo do_shortcode($tagu['0']); ?>
</div>`
How do I add images to a specific gallery? I can't find a gallery id in the media library and/or I don't know where to find the class such as sv_footer_photo or sub_photo.
Could you please explain it to me?
Oh Wow, I've found it and sure enough it was simple.
I had to click on 'Screen Options' at the top of the page, tick the box for custom fields and then I can see the gallery image ids assigned to that page.
I created an tooltip using qTip 2, where an image and the title is displayed.
But:
If you click the image inside the tooltip, a modal box displays.
In this modal-box the image should be displayed, but it isn't.
Here it is: http://jsfiddle.net/fDavN/8378/
<div id="openModal" class="modalDialog">
<div>
X
<img src='{{{img}}}' alt='image could not be displayed' class='profilep' />
</div>
</div>
Could you take a look at the source code of the modalbox?
Am I not allowed to use {{{img}}} inside it?
I am using the jQueryUI dialog modal like this:
<div id="dialog-modal" title="Basic modal dialog">
<img src="#" alt="Pictures" />
</div>
I have a PHP foreach loop that displays three image icons at any given moment. The image urls are in a MySQL database. The images themselves are contained inside anchor tags, and shown as a thumbnail. The <a> contains a class called "theLink". jQuery knows to open up the dialog when you click on "theLink" (in essence, clicking on the pic).
My hope is to allow the image to be shown much larger than a thumbnail by clicking on it. And then it will dynamically transfer the image link to the modal dialog where it will be shown. So again, one modal dialog div (as seen above) just under the <body> tag. This is what I am looking for:
When you click on "theLink" it will take the PHP generated image link from the img and use it to replace the "#" in the modal div.
<a> <img src="PHP GENERATED" /> </a>
I figured out the answer by getting jQuery basics down.
I had to create a class called ImageLink in the image that is php generated. I had to use a class, not an ID because this class would be repeated three times as I have three thumbnails displayed at a time.
Keyword 'this' was important so I can point to the specific imageLink class.
<a><img src="PHP GENERATED" class="imageLink" /></a>
Then, in jQuery:
var realImage = $(this).find('.imageLink').attr("src");
$('#popUpImage').attr('src', realImage);
$('#dialog-modal').dialog('open');