Hi I am using ImageFlow plugin in my website to add cover flow effect to set of images. I have gone through the documentation and tried with different examples they works fine but the major problem is that images are invisible when i first load the page, but appears as soon as i resize the browser window size manually by mouse. Below is the code where i used Imageflow class.
<div id="unique_name" class="imageflow">
<?php foreach ($ABC['A'] as $ABC) : ?>
<img src="../<?= $ABC['dir'] . $ABC['image'] ?>" width="200" height="200" />
<?php endforeach; ?>
</div>
Related
I have ACF set up to be called into a fancybox. It's pulling in the fields (because I can see the hardcoded header information) but nothing from the ACF. I've set the link to call an ID which is then assigned to the section I want to call when clicked.
I expect to click the image and open the fancy box with the ACF image and content displaying in the fancybox. What I get is header fields and no acf content.
I've tried removing the display none from the class.
I tried hard coding a basic a tag calling a p and that seemed to work, but when I put in the ACF information, it breaks.
I also removed all of the php and just hard coded in an image and content, and it works. It just doesn't like the php calling my ACF.
<a href="#popup" data-fancybox>
<img class="image" src="<?php the_field('project_image', get_the_ID()); ?>" />
</a>
<section id="popup">
<img src="<?php the_field('project_image', get_the_ID()); ?>">
<h3>About</h3>
<p><?php echo $about_content;?></p>
<hr class="hr-left">
<h3>Features</h3>
<p><?php echo $features_content; ?></p>
<a class="btn secondary-btn" href="<?php echo $code_reference_url; ?>"><?php echo $button_text; ?></a>
</section>
When the image is clicked, a fancy box will open and display the content within the "popup" div. What's happening is that it's opening the lightbox and populating with empty fields.
I was able to resolve this. I didn't have the information operating inside the loop. See solution below:
<?php while ($loop->have_posts()) : $loop->the_post();
$about_content = get_field('about_content');
$features_content = get_field('features_content');
$button_text = get_field('button_text');
?>
Firstly there are 101 questions similar to this one, however still unable to answer this question.
I am creating a similar interface to youtube, with video thumbnails on the right side and a pain playing pane.
My loop for displaying thumbnail images is as follows:
<?php function getVimeoThumb($id) {
$data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
$data = json_decode($data);
return $data[0]->thumbnail_medium;
} ?>
<div id="thumb">
<img src="<?php echo getVimeoThumb($id);?>" alt="">
<h4><?php the_sub_field('child_title'); ?></h4>
</div>
My main feature video is displayed as follows:
<div id="feature">
<h4 id="mainTitle"><?php the_sub_field('video_title'); ?></h4>
<iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id')?>" width="500" height="282"></iframe>
</div> <!-- end of feature Container -->
The initial load will be conducted by PHP, however the DOM manipulation should be achieved by javascript.
Questions
How can I swap just the ID and text between these two divs.
I would also like to hide the thumbnail that has been clicked as it is shown in the feature frame.
Many thanks
On your thumb, you could put the id on a rel on your div so you can retrieve it easily via jQuery:
`<div id="thumb" rel="your_id">...</div>`
And a $('#thumb').attr('rel') to get it.
Then you can create a JavaScript function that gives you the full URL from the ID and update your iframe src via $('#feature iframe').attr('src','your_url')
I am very confused! Here's the site I'm working on: http://209.200.104.187/
I am using the Cycle2 plugin for jQuery and CodeIgniter.
In Chrome, it looks like this:
There is a cycler behind the main content. It works for me in Chrome, but not in IE11. Furthermore, my client says it is not working in their chrome browser.
The way I generate the image cycler is like this:
<?php if(#$home_header == 1): ?>
<div id="slideshow" class="cycle-slideshow" data-cycle-pause-on-hover="false"
data-cycle-speed="3000">
<?php
$slides = glob('assets/images/home/background/'.'*.jpg');
foreach($slides as $s) {
echo '<img src="'.$s.'" />';
}
?>
</div>
<?php endif; ?>
I checked the IE11 source code and there are no images, but there IS <div id="slideshow"></div>. It just has an empty <div>.
MOREOVER, if I try to output straight HTML <img/> tags, IE11 is NOT showing them. Just for debugging purposes, I tried to put some images inside #slideshow, and they didn't appear in IE, even when I cleared the cache and refreshed.
I'm very confused because the debugging images show up immediately in Chrome. But never in IE.
Any ideas why IE is behaving so strangely? I am not using jQuery to initiate the Cycle2 plugin, I'm using data- attributes.
I tried it with jQuery initialization instead and that didn't work either.
I'm adapting a javascript toolbar to a Joomla CMS module. This javascript toolbar has many buttons whereby each buttons invoke a javascript file (plugin)
Current toolbar was done on Javascript.
This is the code to load the toolbar.
Initial code to call the toolbar and its plugins;
"undefined"==typeof window.AtKit?(d=document,jf=d.createElement("script"),jf.src="http://domain.com/jw3c/atkit.min.js",jf.type="text/javascript",jf.id="AtKitLib",d.getElementsByTagName("head")[0].appendChild(jf),window.AtKitLoaded=function(){var c=null;this.subscribe=function(b){c=b};this.fire=function(b,e){null!=c&&c(b,e)}},window.AtKitLoaded=new AtKitLoaded,window.AtKitLoaded.subscribe(function(){__start()})):__start();
function __start(){var c=window,b=AtKit;$lib=b.lib();var e="ftw resize fonts spellng dictionary insipio-tts readability wordprediction css overlay shortcutkeys tooltip".split(" ");b.importPlugins(e,function(){b.setLogo("http://domain.com/services/logo.jpg");b.setName("JW3C");"undefined"==typeof c.AtKitLanguage?b.setLanguage("en"):b.setLanguage(c.AtKitLanguage);var a;a="Version 1.0.0<p style=\"line-height:120%\">Created by <a href='http://domain.com'>S</a>, <a href='http://www.domain.my/'></a>.<br><br>";
a+="Fugue Icons © Brandon Aaron under MIT licence.<br>';a+="Word prediction provided by <a href='http://www.aitype.com/'>AIType</a>.<br>";
a+="Text-to-Speech provided by <a href='http://www.acapela-group.com/'>Acapela Group</a>.";a+="</p>";b.setAbout(a);$lib.each(e,function(a,c){b.addPlugin(c)});b.addResetFn("reset-saved",function(){b.clearStorage();null!=typeof localStorage&&localStorage.removeItem("ATBarAutoLoad")});b.addCloseFn("close-saved",function(){null!=typeof localStorage&&localStorage.removeItem("ATBarAutoLoad")});b.render();$lib(".at-btn:first a").focus();null!=typeof localStorage&&localStorage.setItem("ATBarAutoLoad",1)})}
;
The full javascript of the toolbar:
https://github.com/AccessAtECS/AtKit/blob/master/atkit/latest/atkit.js
One of the javascript button in the above code calls the following plugin to be included in the toolbar.
http://domain.com/services/jw3c/plugins/tts.js
As per the above code, the toolbar appears on top of my site with all plugins(javascript files).
Right now I dont want the toolbar invoke itself. But need to embed each item of these toolbar plugins into my php file below;
<div id="samsc-<?php echo $module->id?>" class="samsc <?php echo $css; ?>">
<div class="inner normal-msg">
<?php echo $text; ?>
//Need add javascript buttons here
</div>
<div class="buttons">
<span class="icon-toogle opened"><?php echo JText::_('TOGGLE_BAR'); ?></span>
</div>
</div>
Any hints greatly appreciated.
You are best looking at a non-minified version of the code to see how it works.
There appears to be one for this here:
https://github.com/AccessAtECS/AtKit/blob/master/atkit/latest/atkit.js
I'd imagine from that you should look around lines 94, as that "position:fixed" is what is fixing the bar to the top of your page.
Line 387 would be my guess where it is saying it should render the html next to the opening body tag.
If you don't want to edit this code directly, then it may be simpler (though bulkier) to use css and javascript to modify the display of the bar after it has loaded. For example, onload you could strip the "position:fixed" style and change the left and top values to match the left and top values of your module.
i have a .js file that shows thumbnails for images in a directory. It is set to trigger on mouseover and show an enlarged image. I need to modify this .js to show the thumbnail and the enlarged image on the same page in two different divisions when the page loads.
The code that triggers the .js is:
<a href="http://www.marknutt.com/photos/storage/<?php echo $rows['file']; ?>" data- lightbox="" name="<?php echo '<b><i>'.$rows['painting'].'</i></b>'.' '."<font color='#585858'>".$rows['year2'].' ' .$medb.' on.$rows['material2'].' '.$pieces[0].' x '.$pieces[1].' x '.$pieces[2].' in. '
."<sup><font size="1">".$location2a.'</font></sup> '.$rows['location2'].' '.$status3.' '.
"<a id='displayText' href='javascript:toggle()'></font><font color="#31B404"><i>Price</i></font></a><div id='toggleText' style='display: none' > ".$pieces2a.$pieces2."</div>".
'<br>'.$markcom.'<br>'.$com.$query4d.'</a>'; ?>"
title="<?php echo $rows['painting']; ?>"
onclick="return false"
style="max-width:70px;max-height:70px;" rel="enlargeimage2"
rev="targetdiv:loadarea,link:http://www.marknutt.com/photos/storage/
<?php echo $rows['file']; ?>">
This pulls the images from the directory and displays them in a division with a one column table. The rel="enlargeimage2" activates this script.
<script type="text/javascript" src="thumbnailviewer_b.js"></script>
ThumbnailViewer
You can view this script in action by going to:
Loading a thumbnail with large image
Currently I must rolloever the thumbnail to enlarge it. I know how to change this to a 'click' but not to load the enlarged image automatically when the page loads. The ?name=Solanti in the url can be changed to any image filename.
I'm quickly learning jquery but still have a lot to learn. Can anyone please help me?
$(window).load(function(){
$('#<yourImageID').fadeIn(1500); //fade image in once all the images (only 1?!) are loaded
})
This should do the trick and look nice because the image will fade in, instead of loading uglily.