Edited:
Below js code generate a modal like this
but sometime it fails.And it look like this
So i want a solution for that problem
This is the html structure
<div class="col-sm-4">
<div class="gallery-item shad" style="height : 100px; width:143px;">
<a href="#">
#if(empty($service->image)))
{{HTML::image('image/no-image.png',null,array('style'=>'height : 100px;'))}}
#else
{{HTML::image('image/'.$service->image,null,array('style'=>'height : 100px;'))}}
#endif
</a>
</div>
file.js
/* copy loaded thumbnails into carousel */
$('.gallery-image img').on('load', function() {
/*this section execute when i reload the page*/
console.log('not working');
}).each(function(i) {
if(this.complete) {
var item = $('<div class="item"></div>');
var itemDiv = $(this).parent();
$(itemDiv.html()).appendTo(item);
item.appendTo('.carousel-inner');
if (i==0){ // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({interval:false});
/* when clicking a thumbnail */
$('.gallery-image').click(function(e){
e.preventDefault();
var idx = $(this).parents().parents().index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
});
this code works when i load the page for very first time but when i reload the page and click on the image this code is not work working
I can understand that you are setting the contents of the modal window on the first few lines of the JavaScript. Try to set it in the click event:
$('.gallery-image').click(function(e){
e.preventDefault();
var idx = $(this).parents().parents().index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
// Update the modal window contents here.
});
Finally i have find a solution
$('.carousel-inner').find('.item').first().addClass('active');
/* when clicking a thumbnail */
$('.gallery-image').click(function(e){
e.preventDefault();
var idx = $(this).parents().parents().index();
var id = parseInt(idx);
$("#myModal").modal("show");
$('#modalCarousel').carousel(id);
});
Related
I have an image gallery and inside each image I have a div with the image name. When I click on an image a modal with some details is opened and the div with the image name is changed by the div with the tools.
What I want is that when closing the modal (just click outside it) everything returns to the original phase ie the div with the name replaces the div with the tools.
Javascript
$(document).ready(function() {
var toolbar = $('.ImageButtonsG').html();
$(".d-block").each(function (index, value) {
$(this).on("click", function(){
var default_title = $(this).find('.ImageText');
$(default_title).html(toolbar);
$('.ImageButtonsG').empty();
});
});
});
I found problem with your JS code. Here is the updated code:
$(document).ready(function() {
var toolbar = $('.ImageButtonsG').html();
$(".d-block").on("click", function(){
var default_title_ele = $(this).find('.ImageText');
var default_title = $(default_title_ele).html();
$(default_title_ele).html(toolbar);
$("#myModal2").on('hidden.bs.modal', function () {
$(default_title_ele).html(default_title);
});
});
});
Here is updated codepen.
I hope it will solve your problem.
Hi there I am using these shopify tabs in a page, not product description, to get my design.
Here is the link I received the tabs from - https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions
<div>
<ul class="tabs">
<li>Info</li>
<li>Shipping</li>
<li>Returns</li>
</ul>
<div id="tab-1">
content etc.
<div id="tab-2">
content etc.
</div>
<div id="tab-3">
</div>
</div>
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
From this code I am wondering how I can get to a specific tab that is not active from a link on a different page.
If I create a link and have it as:
link To tab
It doesn't load the 3rd tab. Still loads the first one as default.
I've had a look online and can't seem to get anywhere. Is this possible with this code in the above link or will I need to look for something else? My JavaScript is limited and tried to edit it myself from different tutorials online but can't get anywhere.
I am also having trouble keeping on that active tab if the page refreshes. If I am on #tab-3 and the page refresh I go back to #tab-1
Is it to do with this part of the code? I've tried changing it with my limited knowledge and don't get anywhere:
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
Pasted code from comment:
window.onload = function() {
$('ul.tabs).each(function(){
var openedHash = new URL(window.location.href).hash;
links.first().removeClass('active');
content.hide();
active = $('a[href='+ openedHash + ']');
content = $($('a[href='+ openedHash + ']').attr('href'));
active.addClass('active');
content.show();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
Thanks
For get active tab after site reload u can try use new URL(window.location.href).hash
May be some like this
var openedHash = new URL(window.location.href).hash;
links.first().removeClass('active');
content.hide();
active = $('a[href='+ openedHash + ']');
content = $($('a[href='+ openedHash + ']').attr('href'));
active.addClass('active');
content.show();
is it possible to display 3 images one after another at each button click using a array in JavaScript?
I have an array called
var images = ["image1.jpg","image2.jpg","image3.jpg"]
The way I need the website to load is for the first picture to already be there. Then when I click on the button I want the next picture to be displayed however replacing the image that was there before. I want this to repeat throughout the entire, so when I click on the button, and if the image being displayed was image3, then image1 should be displayed.
I want to share the code I have so far however I don't know where to start. the only code i have is the layout and a variable.
var images = ["image1.jpg","image2.jpg","image3.jpg"]
Try like this.Use 'document.querySelector' do select your button.On clicking button appen images using forEach in body.
var button = document.querySelector('#show');//selects your button
button.addEventListener('click',function(){ // handle click event
var images = ["image1.jpg","image2.jpg","image3.jpg"];//array of valid images
images.forEach(function(image){
img = document.createElement('img');//creates a img element
img.src = image;//sets src of img tag
document.body.appendChild(img)//appends into body
});
});
<button id="show">
Show images
</button>
Pure JS solution.
var images = ["http://placehold.it/350x150", "http://placehold.it/250x150", "http://placehold.it/150x150"];
var elem = document.getElementById('img');
var i = 0;
window.onload = function() {
elem.setAttribute("src", images[i]);
}
elem.addEventListener('click', function() {
(i < images.length-1) ? i++ : i = 0;
this.setAttribute("src", images[i]);
});
<img src='' id='img'>
jQuery solution.
var images = ["http://placehold.it/350x150", "http://placehold.it/250x150", "http://placehold.it/150x150"];
var i = 0;
$(document).ready(function() {
$('#img').attr('src', images[i]);
});
$('#img').click(function() {
(i < images.length-1) ? i++ : i = 0;
$('#img').attr('src', images[i]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='' id='img'>
It works but there's a pesky bug I can't understand how to fix (i'm a beginner).
What happens is there are 3 image buttons (only showing code for 1 here) and when i hover over them, they change image, and revert when i take mouse off. This is the html.
When I click any of the 3 image buttons (javascript), it changes its own image, and sets the other 2 image buttons to the normal image.
After this point (clicking the image) the hovering html code doesn't work anymore.
function changeImage3() {
document.getElementById('MageBTN').src = 'images/Character/NotSelected_Mage.png';
document.getElementById('WarriorBTN').src = 'images/Character/NotSelected_Warrior.png';
}
<a href="#" onclick="changeImage3()"><img id="RogueBTN" src="images/Character/NotSelected_Rogue.png" alt="image"
onclick="this.src='images/Character/Selected_Rogue.png';
this.onmouseover = false; this.onmouseout = false;"
onmouseover="this.src='images/Character/Selected_Rogue.png';"
onmouseout="this.src='images/Character/NotSelected_Rogue.png';">
</a>
just suggestion.. Use simple css property..
#yourID a:hover{
//your image which want to show on hover
}
If I have understand correctly you want to lock the selected state of a button on click and unlock/reset to not-selected when another button is clicked. Therefore you have to store the state of the buttons so I suggest to move all functionality to a script. Since you have all images well ordered it's enough to change Sel/NotSel in the url.
window.onload = function() { // ensures that all elements are there
var buttons = {
RougeBTN: document.getElementById("RougeBTN"),
VertBTN: document.getElementById("VertBTN"),
BleuBTN: document.getElementById("BleuBTN")
},
locked;
function clicked() {
for (var btn in buttons) { // iterate over the buttons
var b = buttons[btn];
// if this button was clicked save the state
if (btn == b.id) locked = btn;
else {
b.src = b.src.replace('/Sel', '/NotSel');
}
}
}
function mover() { // works only when button is not locked
if (locked != this.id) this.src = this.src.replace('/NotSel', '/Sel');
}
function mout() { // works only when button is not locked
if (locked != this.id) this.src = this.src.replace('/Sel', '/NotSel');
}
for (var btn in buttons) { // now set the functions to all buttons
var b = buttons[btn];
b.onclick = clicked; b.onmouseover = mover; b.onmouseout = mout;
}
}
In html all buttons look like this:
<img id="RougeBTN" src="images/Character/NotSelected_Rouge.png" alt="image">
I have been wrangling with my code all day with no luck in solving the problem.
My website has a series of images acting as navigation:
<div id="thumbs">
<img src="images/edwardsthumb1.jpg" class="thumb" border="0"/>
<img src="images/sample1thumb.jpg" class="thumb" border="0"/>
</div>
when these are clicked, content is added to blank divs:
<div id="image"> <!-- main image container -->
</div>
<div id="gallerytext"> <!-- text box -->
</div>
<div id="thumbset"> <!-- series of sub images/navigation -->
</div>
with this javascript:
$(function() {
var text = $('#gallerytext1').html(); <!-- blank divs are filled with content on page load -->
$('#gallerytext').html(text);
var thumbset = $('#thumbset1').html();
$('#thumbset').html(thumbset);
$('#image').html('<img src="images/edwards1.jpg" border="0"/>');
<!-- click handler -->
$(".image").click(function() { <!-- image variable is set when an image with class "image" is clicked -->
var image = $(this).attr("rel"); <!-- each image has appropriate rel attribute to fill variable -->
if (image == 'images/edwards1.jpg'){ <!-- different text and gallery loaded on click of specific image -->
var text = $('#gallerytext1').html();
$('#gallerytext').html(text);
var thumbset = $('#thumbset1').html();
$('#thumbset').html(thumbset);
$('#thumbset').hide();
$('#thumbset').fadeIn('slow');
}
if (image == 'images/sample1.jpg'){ <!-- different text and sub-gallery loaded on click of specific image -->
var text = $('#gallerytext2').html();
$('#gallerytext').html(text);
var thumbset = $('#thumbset2').html();
$('#thumbset').html(thumbset);
$('#thumbset').hide();
$('#thumbset').fadeIn('slow');
}
$('#image').hide(); <!-- main image changed -->
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
It works fine after the intial load, however if one of the "if" statements is triggered and the content is changed, images with the class .image within the div "thumbset" are now unclickable and the main image no longer changes. Images within the main navigation div: "thumbs" still work fine, and the "if" statements still go off.
all images are tagged and formatted as per the top code box in my post, and I cannot figure out why only images within "thumbset" decide to stop working.
I am very very green to Javascript, so any assistance will be greatly appreciated!
UPDATE: here is my updated code. Much cleaner now but the function is not working at all. I'm thinking the problem may be with the variable setting of "image" variable?
$(document).ready(function() {
var $doc = $(document.body);
var text = $('#gallerytext1').html(); //blank divs are filled with content on page load
$('#gallerytext').html(text);
var thumbset = $('#thumbset1').html();
$('#thumbset').html(thumbset);
$('#image').html('<img src="images/edwards1.jpg" border="0"/>');
//click handler
$doc.on("click",".image",function(){
var image=$(this).attr("rel");
var imid=$(this).attr("data");
var text=$('#gallerytext'+imid).html();
var thumbset=('#thumbset'+imid).html();
$('#debug').html(imid);
$('#gallerytext').fadeIn('slow');
$('#gallerytext').html(text);
$('#thumbset').fadeIn('slow');
$('#thumbset').html(thumbset);
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
use
$(document).ready(function() {
var $doc = $(document.body);
$doc.on("click",".image", function() {//...
then bind all events from the $doc (chain them if different selectors
$doc.on(event,selector,function).on(ev,sel,fn)...
or if multiple events on same selector
$doc.on({
ev : function(e) {},
ev2 : function(e) {}
//...
},selector).on()...
to comment out in javascript use, it'll comment what's after in same line
//
instead of <!-- which is more meant to comment out html
your code in spaghetti like with many repeated instructions,
take out the common instructions in the if
define a pattern so to avoid using if(stg=='sthg')
for example you could do
<a ... data-idtoload="*id*">...
then
var imid=$(this).data("idtoload");
var text = $('#gallerytext'+imid).html();
$('#gallerytext').html(text);
var thumbset = $('#thumbset'+imid).html();
//...
no more if & your code is cut by 66%